/* *À jour au 28/09/2026* — Porteclose v2. Posé APRÈS assets/base/socle.css.
   Deux rôles, pas plus : (1) compléter le rendu de la feuille de base là où elle ne suffit pas (leur diaporama, leurs étiquettes, leur fond clair, leur pied de page clair) ;
   (2) poser la DA Porteclose validée le 17/09 : leur orange devient le bleu Porteclose, leur Poppins
   devient Bricolage Grotesque et Work Sans (hébergées), le corps reste à 19 px (plancher Krescia).
   Décors écartés et pourquoi (règle 19) : pas d'ombre portée (eux n'en ont pas), pas de coins arrondis
   (eux non plus : vc_btn3-shape-square). La passe 1 est gardée dans _scripts/porteclose-v2.passe1.css. */

@font-face { font-family: 'Bricolage Grotesque'; src: url(fonts/BricolageGrotesque-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url(fonts/BricolageGrotesque-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url(fonts/WorkSans-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Work Sans'; src: url(fonts/WorkSans-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --marque: #0174CA;   /* leur orange #f07d10 devient le bleu du logo : fonds de boutons (blanc dessus 4,8:1) */
  --accent: #00467E;   /* texte bleu : titres, liens (8,8:1) */
  --encre: #2A3B4A;    /* leur marine #023457 devient le navy Porteclose */
  --gris: #465059;     /* leur gris de texte */
  --fond: #F6F7F9;     /* leur fond de page clair */
  --blanc: #FFFFFF;
  --ligne: #DCE1E6;
  --f-titre: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
  --f-texte: 'Work Sans', 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --haut-entete: 64px;
}

/* ── Base ─────────────────────────────────────────────────────────────────────────────── */
body { font-family: var(--f-texte); font-size: 19px; line-height: 1.6; color: var(--gris); background: var(--fond); overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--haut-entete) + 12px); }
h1, h2, h3 { font-family: var(--f-titre); letter-spacing: -0.01em; text-transform: none; }
a { color: var(--accent); }
a:hover, a:focus { color: var(--encre); }
img { max-width: 100%; height: auto; }
p { margin: 0 0 16px; }
:focus-visible { outline: 3px solid var(--marque); outline-offset: 3px; }
.pc-visuel-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pc-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--encre); color: #fff; padding: 12px 18px; }
.pc-skip:focus { left: 12px; color: #fff; }
.container { max-width: 100%; }
@media (min-width: 1200px) { .container { width: 1200px; } }
.vc_row::after, .pc-zone::after { content: ""; display: table; clear: both; }
@media (min-width: 768px) { .vc_col-sm-4, .vc_col-sm-5, .vc_col-sm-7 { float: left; } .vc_col-sm-4 { width: 33.3333%; } .vc_col-sm-5 { width: 41.6667%; } .vc_col-sm-7 { width: 58.3333%; } }

/* ── Leur en-tête (header-v8) ───────────────────────────────────────────────────────────── */
#masthead { position: sticky; top: 0; z-index: 90; background: var(--blanc); transition: box-shadow .3s; }
#masthead.pc-colle { box-shadow: 0 1px 0 var(--ligne); }
#masthead.is-sticky .header { position: relative; top: auto; z-index: auto; padding: 0; }
.header-v8 .header_wrap { padding: 0 32px; }
.header-v8 .header-center { display: flex; align-items: center; height: var(--haut-entete); min-height: 0; margin: 0; }
#masthead .header, #masthead .header-fullwidth, #masthead .header_wrap { height: var(--haut-entete); }
.header-v8 .logo_home, .header-v8 .logo { line-height: 0; margin: 0; }
.header-v8 .header-center > [class*=col-] { float: none; padding: 0; }
.header-v8 .logo { flex: 0 0 auto; width: auto; }
.header-v8 .logo img { display: block; width: 190px; height: auto; }
.header-v8 .text-center { flex: 1 1 auto; width: auto; }
.header-v8 .right { flex: 0 0 auto; width: auto; display: flex; align-items: center; gap: 6px; }
.header-v8 .primary-menu { padding: 0 !important; }
.header-v8 .main-nav ul > li { margin: 0 8px; position: relative; }
.header-v8 .primary-menu { white-space: nowrap; }
.header-v8 .main-nav ul li a { font-family: var(--f-texte); font-size: 13.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--encre); display: inline-block; padding: 20px 0; line-height: 1.2; }
.header-v8 .main-nav ul li a:hover { color: var(--accent); text-decoration: none; }
.main-navigation li.menu-item-has-children > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); padding: 0; font: inherit; }
.main-navigation li.menu_devis > a { color: var(--accent) !important; }
.main-navigation ul.children { background: var(--blanc); border-top: 3px solid var(--marque); padding: 8px 0; min-width: 240px; display: none; box-shadow: 0 10px 24px rgb(42 59 74 / .12); }
.main-navigation ul.children li { padding: 0 20px; }
.main-navigation ul.children li a { padding: 9px 0 !important; text-transform: none !important; font-weight: 400 !important; font-size: 16px !important; letter-spacing: 0 !important; }
@media (min-width: 992px) { .main-navigation li.menu-item-has-children:hover > ul.children, .main-navigation li.menu-item-has-children:focus-within > ul.children { display: block; opacity: 1; visibility: visible; transform: none; } }
.pc-tel { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--marque); }
.btn-responsive-nav { display: none; width: 48px; height: 48px; border: 0 !important; background: none; padding: 0; position: relative; }
.pc-burger, .pc-burger::before, .pc-burger::after { position: absolute; left: 12px; width: 24px; height: 2px; background: var(--encre); content: ""; transition: transform .3s var(--ease); }
.pc-burger { top: 23px; } .pc-burger::before { left: 0; top: -8px; } .pc-burger::after { left: 0; top: 8px; }
.btn-responsive-nav[aria-expanded=true] .pc-burger { background: transparent; }
.btn-responsive-nav[aria-expanded=true] .pc-burger::before { transform: translateY(8px) rotate(45deg); }
.btn-responsive-nav[aria-expanded=true] .pc-burger::after { transform: translateY(-8px) rotate(-45deg); }

/* ── Leur diaporama plein écran (revslider), 1re vue = la bannière de Kévin ─────────────── */
/* 28/09, Saadou : « dézoome la photo 1 ». La hauteur n'est plus plafonnée à celle de l'écran (sur un portable
   de 690 px, la bannière était agrandie puis rognée en haut et en bas) : elle suit le rapport de la bannière. */
.pc-diaporama { position: relative; width: 100%; height: calc(100vw * 858 / 1536); min-height: 0; overflow: hidden; background: #1d2c3a; }
.pc-diapo { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); }
.pc-diapo.est-active { opacity: 1; z-index: 1; }
.pc-diapo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.js .pc-diapo.est-active > img { animation: pc-kenburns 8s linear both; }
@keyframes pc-kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
/* La 1re vue : la photo de sa bannière, sans sa bande bleu foncé (1536 × 858, le format de leur diaporama). */
.pc-diapo--banniere > img { object-position: 50% 30%; }
.js .pc-diapo--banniere.est-active > img { animation: pc-entree-banniere 1.4s var(--ease) both; }
@keyframes pc-entree-banniere { from { transform: scale(1.04); opacity: .6; } to { transform: none; opacity: 1; } }
/* Leur encadré de légende : titre, sous-titre en capitales, lien. */
.pc-diapo__cap { position: absolute; left: 22%; top: 22%; max-width: 560px; padding: 26px 34px; background: rgb(20 30 40 / .45); color: #fff; }
.pc-diapo__titre { font-family: var(--f-titre); font-weight: 700; font-size: clamp(40px, 5vw, 68px); line-height: 1; margin: 0 0 10px; color: #fff; }
.pc-diapo__cap p { text-align: left !important; word-spacing: normal; }
.pc-diapo__sous { font-weight: 700; font-size: 17px; line-height: 1.3; letter-spacing: .02em; text-transform: uppercase; margin: 0 0 6px; color: #fff; }
.pc-diapo__lien { font-size: 15px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; display: inline-flex; min-height: 48px; align-items: center; }
.js .pc-diapo__cap > * { opacity: 0; transform: translateX(-30px); }
.js .pc-diapo.est-active .pc-diapo__cap > * { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .pc-diapo.est-active .pc-diapo__titre { transition-delay: .5s; }
.js .pc-diapo.est-active .pc-diapo__sous { transition-delay: .75s; }
.js .pc-diapo.est-active .pc-diapo__lien { transition-delay: 1s; }
/* Leurs numéros 01 02 03, à droite. */
.pc-diapo-nums { position: absolute; right: 36px; top: 50%; transform: translateY(-50%); z-index: 3; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pc-diapo-num { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: rgb(255 255 255 / .85); font: 700 16px var(--f-texte); min-width: 48px; min-height: 48px; cursor: pointer; text-shadow: 0 0 6px rgb(0 0 0 / .75), 0 1px 2px rgb(0 0 0 / .8); }
.pc-diapo-num.est-active { color: #fff; font-size: 24px; }

/* ── La bande bleu foncé de sa bannière, sous la section 1 ────────────────────────────── */
.pc-engagements { background: #1d2c3a; color: #fff; padding: 22px 24px 18px; }
.pc-engagements ul { list-style: none; margin: 0 auto; padding: 0; max-width: 1240px; display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.pc-engagements li { display: flex; align-items: center; gap: 12px; flex: 1 1 180px; padding: 4px 0; border-left: 1px solid rgb(255 255 255 / .18); padding-left: 20px; }
.pc-engagements li:first-child { border-left: 0; padding-left: 0; }
.pc-engagements svg { color: #5AB4F5; flex: 0 0 auto; }
.pc-engagements span { font-size: 16px; line-height: 1.3; text-transform: uppercase; letter-spacing: .03em; color: rgb(255 255 255 / .85); }
.pc-engagements strong { display: block; color: #fff; }
.pc-devise { margin: 14px 0 0; text-align: center; font-family: var(--f-titre); font-size: 22px; color: #fff; letter-spacing: .02em; }
.js .pc-engagements li { opacity: 0; transform: translateY(12px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .pc-engagements.est-vu li { opacity: 1; transform: none; }
.js .pc-engagements.est-vu li:nth-child(2) { transition-delay: .1s; } .js .pc-engagements.est-vu li:nth-child(3) { transition-delay: .2s; }
.js .pc-engagements.est-vu li:nth-child(4) { transition-delay: .3s; } .js .pc-engagements.est-vu li:nth-child(5) { transition-delay: .4s; }

/* ── Leurs tuiles : pleine largeur, filets blancs, étiquette sombre en capitales ─────────── */
.pc-tuiles { background: var(--blanc); padding: 10px; }
.vc_row.pc-mosaique { display: grid !important; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: 250px; margin: 0 0 10px !important; left: auto !important; width: auto !important; position: relative !important; }
.vc_row.pc-mosaique.fifth-parts { grid-template-columns: 1fr 4fr; }
.pc-mosaique > .wpb_column, .pc-mosaique .vc_column-inner, .pc-mosaique .wpb_wrapper, .pc-mosaique .vc_inner, .pc-mosaique .vc_inner .wpb_column { display: contents !important; }
.pc-mosaique::before, .pc-mosaique::after, .pc-mosaique ::before, .pc-mosaique ::after { display: none !important; }
.pc-tuile { margin: 0 !important; min-height: 0; }
.pc-tuile figure { margin: 0; height: 100%; }
.pc-tuile a.vc_single_image-wrapper { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; background: var(--encre); text-decoration: none; cursor: zoom-in; }
.pc-tuile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.pc-tuile a:hover img, .pc-tuile a:focus-visible img { transform: scale(1.06); }
.pc-etiq { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 88%; padding: 10px 18px; background: rgb(20 30 40 / .72); color: #fff; text-align: center; transition: background-color .3s, transform .4s var(--ease); }
.pc-etiq strong { font-family: var(--f-texte); font-weight: 700; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.pc-etiq span { font-size: 15px; line-height: 1.35; color: rgb(255 255 255 / .92); }
.pc-tuile a:hover .pc-etiq, .pc-tuile a:focus-visible .pc-etiq { background: rgb(1 116 202 / .92); transform: translateY(-4px); }
.pc-tuile--picto a.vc_single_image-wrapper { background: var(--accent); cursor: pointer; flex-direction: column; gap: 10px; }
.pc-tuile__picto { color: #9FD0F7; }
.pc-tuile--picto .pc-etiq { background: none; }

/* ── Leur bloc texte : fond clair, H1 modeste, H2 en couleur, liste « … assure : » ───────── */
.pc-page { padding-bottom: 20px; }
.vc_custom_1597836070653 { padding-top: 56px; }
@media (min-width: 768px) { .vc_custom_1597836070653 { margin-left: -47px !important; } }
.vc_custom_1597836070653 h1 { font-size: clamp(28px, 2.6vw, 36px); font-weight: 700; line-height: 1.15; color: var(--encre); margin: 0 0 18px; }
.vc_custom_1597836098159 h2, .pc-zone h2 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.12; color: var(--accent); margin: 26px 0 10px; }
.vc_custom_1597836098159 h3 { font-size: 23px; color: var(--encre); margin: 22px 0 10px; }
.wpb_text_column p, .wpb_text_column li { font-size: 19px; line-height: 1.6; }
.pc-page p, .pc-page li { text-align: left; }
.pc-page p[style*=center], .pc-page .pc-avis__note, .pc-page .pc-avis__ancien { text-align: center !important; }
.vc_custom_1597836098159 .wpb_text_column p { text-align: left; }
.list-service li { padding-left: 32px; margin-bottom: 8px; }
.list-service li i { position: absolute; left: 0; top: 6px; width: 20px; height: 20px; border: 2px solid var(--marque); border-radius: 50%; }
.list-service li i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid var(--marque); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.vc_row-fluid.vc_inner { display: flex; flex-wrap: wrap; align-items: center; }
.pc-cadre { margin: 0; }
.pc-cadre a { display: block; overflow: hidden; cursor: zoom-in; }
.pc-cadre img { display: block; width: 100%; max-height: 520px; object-fit: cover; transition: transform 1s var(--ease); }
.vc_custom_1597836098159 > .vc_inner:first-child { align-items: flex-start; }
.vc_custom_1597836098159 > .vc_inner:first-child .pc-cadre { margin-top: 8px; }
.pc-cadre a:hover img { transform: scale(1.04); }
.pc-appel-milieu { margin: 44px 0 56px; }

/* ── Leurs boutons (vc_btn3, carrés) en bleu ───────────────────────────────────────────── */
.pc-btn.vc_btn3 { font-family: var(--f-texte); font-weight: 700; font-size: 17px; padding: 16px 28px; border-radius: 0; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--marque); color: #fff; border: 0; text-decoration: none; transition: background-color .25s, transform .25s var(--ease); }
.pc-btn.vc_btn3:hover, .pc-btn.vc_btn3:focus { background: var(--accent); color: #fff; transform: translateY(-2px); }

/* ── Avant / après, à la place de leur vidéo ──────────────────────────────────────────── */
.pc-aa { margin: 0; }
.pc-aa__cadre { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--encre); user-select: none; touch-action: pan-y; }
.pc-aa__cadre img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s linear; }
.pc-aa__avant { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.pc-aa__poignee { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; }
.pc-aa__poignee::after { content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--encre); font: 700 18px/46px var(--f-texte); text-align: center; letter-spacing: 2px; }
.pc-zoom-aa { border: 0; padding: 0; background: transparent; overflow: visible; width: min(94vw, calc((88vh - 80px) * 4 / 3)); max-width: none; max-height: none; }
.pc-zoom-aa::backdrop { background: rgb(15 22 30 / .9); }
.pc-zoom-aa .pc-aa { background: var(--blanc); }
.pc-zoom-aa .pc-aa figcaption { padding: 12px 16px; }
.pc-zoom-aa .pc-aa__grand { display: none; }
.pc-zoom-aa[open] .pc-aa { animation: pc-zoom-in .45s var(--ease); }
.pc-zoom-aa .pc-zoom__fermer { top: -60px; right: 0; z-index: 5; }
@media (max-width: 767px) { .pc-zoom-aa .pc-zoom__fermer { top: -56px; } }
.pc-aa__grand { border: 0; cursor: pointer; font-family: var(--f-texte); }
.pc-aa__grand { position: absolute; right: 12px; bottom: 12px; z-index: 2; min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; background: rgb(255 255 255 / .92); color: var(--encre); font-size: 15px; font-weight: 700; text-decoration: none; }
.pc-aa__grand:hover { background: var(--marque); color: #fff; }
.pc-aa__curseur { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.pc-aa__etiq { position: absolute; top: 12px; padding: 4px 10px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgb(20 30 40 / .75); color: #fff; }
.pc-aa__etiq--av { left: 12px; } .pc-aa__etiq--ap { right: 12px; background: var(--marque); }
.pc-aa figcaption { padding-top: 10px; font-size: 17px; color: var(--gris); }
.pc-aa figcaption strong { color: var(--encre); display: block; font-family: var(--f-titre); font-size: 19px; }
.pc-aa.est-change .pc-aa__cadre img { opacity: .35; }
.pc-vignettes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pc-vign { display: block; width: 100%; padding: 0; border: 2px solid transparent; background: var(--blanc); cursor: pointer; font: inherit; color: var(--encre); transition: border-color .2s, transform .3s var(--ease); }
.pc-vign img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pc-vign span { display: block; padding: 4px 2px; font-size: 12px; font-weight: 700; line-height: 1.2; min-height: 34px; }
.pc-vign:hover { transform: translateY(-2px); }
.pc-vign.est-choisi { border-color: var(--marque); }
html:not(.js) .pc-vignettes { display: none; }

/* ── La zone : leur texte local centré, puis la vraie carte ────────────────────────────── */
.pc-zone { padding: 64px 0 24px; }
.pc-zone .wpb_text_column { max-width: 980px; margin: 0 auto; }
.pc-carte-cadre { margin: 24px auto 0; max-width: 560px; }
.pc-carte { display: block; width: 100%; height: auto; }
.pc-carte-cadre figcaption { text-align: center; font-size: 14px; color: var(--gris); margin-top: 8px; }
.c-fond { fill: #EEF1F4; }
.c-com-dehors { fill: #E3E8EC; stroke: #fff; stroke-width: .12; }
.c-com-dedans { fill: #D5E3EF; stroke: #fff; stroke-width: .14; }
.c-teinte { fill: rgb(1 116 202 / .10); }
.c-dep { fill: none; stroke: #8C99A5; stroke-width: .22; stroke-dasharray: .8 .5; }
.c-route { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.c-motorway { stroke: #465059; stroke-width: .5; }
.c-trunk { stroke: #6B7680; stroke-width: .38; }
.c-primary { stroke: #A9B3BC; stroke-width: .22; }
.c-cercle { fill: none; stroke: var(--marque); stroke-width: .45; }
.c-km { font: 700 1.8px var(--f-texte); fill: var(--accent); }
.c-pt { fill: var(--encre); }
.c-pt.c-rep { fill: #8C99A5; }
.c-nom { font: 700 1.55px var(--f-texte); fill: var(--encre); paint-order: stroke; stroke: #fff; stroke-width: .35px; }
.c-nom.c-rep { fill: #6B7680; font-weight: 400; }
.c-nom.c-centre { font: 700 2.4px var(--f-titre); fill: var(--accent); }
.c-halo { fill: rgb(1 116 202 / .25); transform-box: fill-box; transform-origin: center; }
.c-pt-centre { fill: var(--marque); stroke: #fff; stroke-width: .35; }
/* Mouvement de la carte : les routes se tracent, le cercle se ferme, Méré bat. */
.js .pc-zone .c-route, .js .pc-zone .c-cercle { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease); }
.js .pc-zone .c-cercle { transition-duration: 1.8s; transition-delay: .6s; }
.js .pc-zone.est-vu .c-route, .js .pc-zone.est-vu .c-cercle { stroke-dashoffset: 0; }
.js .pc-zone .c-com-dedans, .js .pc-zone .c-teinte, .js .pc-zone .c-nom, .js .pc-zone .c-pt { opacity: 0; transition: opacity 1s var(--ease) 1.2s; }
.js .pc-zone.est-vu .c-com-dedans, .js .pc-zone.est-vu .c-teinte, .js .pc-zone.est-vu .c-nom, .js .pc-zone.est-vu .c-pt { opacity: 1; }
.pc-zone.est-vu .c-halo { animation: pc-halo 2.4s ease-out 2s infinite; }
@keyframes pc-halo { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }

/* ── Leurs 4 étapes : fond clair, titre en capitales, icônes seules ──────────────────── */
.pc-etapes { padding: 48px 0 32px; }
.pc-etapes .modus-headingtitle .shortcode-title h2 { font-family: var(--f-texte); font-size: 28px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--marque); margin: 0 0 36px; }
.pc-etapes__rang { display: flex; flex-wrap: wrap; }
.pc-etape { float: none; }
.pc-etape .vc_icon_element { margin-bottom: 14px; }
.pc-etape .vc_icon_element-inner { width: auto; height: auto; border: 0; }
.pc-ico { color: var(--marque); }
.pc-etape h3 { font-size: 21px; color: var(--encre); margin: 0 0 8px; }
.pc-etape p { font-size: 17px; color: var(--gris); max-width: 250px; margin: 0 auto 24px; }
.js .pc-etapes__rang .pc-etape { opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .pc-etapes__rang.est-vu .pc-etape { opacity: 1; transform: none; }
.js .pc-etapes__rang.est-vu .pc-etape:nth-child(2) { transition-delay: .15s; }
.js .pc-etapes__rang.est-vu .pc-etape:nth-child(3) { transition-delay: .3s; }
.js .pc-etapes__rang.est-vu .pc-etape:nth-child(4) { transition-delay: .45s; }

/* ── Leurs avis : le widget Trustindex de leur accueil (structure, icônes, défilement en boucle, « Lire la suite ») ─── */
.ti-inner { position: relative; background: #F4F4F4 !important; border-radius: 4px; padding: 20px 20px 18px !important; box-shadow: none; }
.ti-review-header { position: relative; padding-right: 26px; }
.ti-platform-icon { position: absolute; top: 0; right: 0; width: 20px; height: 20px; line-height: 0; }
.ti-profile-img { width: 40px; height: 40px; }
.ti-name { font-weight: 700; color: #000; font-size: 16px; }
.ti-date { font-size: 14px; color: #6f6f6f; }
.ti-stars { display: flex; align-items: center; gap: 2px; margin: 4px 0 6px; }
.ti-star { width: 17px; height: 16px; }
.ti-verified-review { margin-left: 6px; }
.ti-review-text-container { font-size: 16px !important; line-height: 1.55; color: #111; }
.ti-inner.est-coupe .ti-review-text-container { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.ti-read-more { background: none; border: 0; padding: 6px 0 0; color: #6f6f6f; font: 400 15px var(--f-texte); text-decoration: underline; cursor: pointer; min-height: 32px; }
.pc-avis__ancien a { font-weight: 700; }
.ti-widget { max-width: 1170px; margin: 0 auto; }
.ti-header { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 22px; color: var(--encre); text-decoration: none; }
.ti-rating-text { font-size: 22px; text-transform: uppercase; letter-spacing: .04em; }
.ti-header-stars { font-size: 24px; }
.ti-rating { font-size: 17px; color: var(--gris); }
.ti-logo { display: inline-flex; align-items: center; gap: 6px; }
.ti-logo-mot { font: 700 24px/1 'Segoe UI', Arial, sans-serif; letter-spacing: -.02em; }
.ti-reviews { position: relative; display: flex; align-items: center; gap: 8px; }
.ti-reviews-container { list-style: none; margin: 0; padding: 4px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; flex: 1 1 auto; }
.ti-reviews-container::-webkit-scrollbar { display: none; }
.ti-review-item { scroll-snap-align: start; }
.ti-inner { margin: 0; height: 100%; padding: 20px; background: #F4F4F4; border-radius: 4px; text-align: left; }
.ti-review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ti-profile-img { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }
.ti-profile-details { flex: 1 1 auto; display: flex; flex-direction: column; }
.ti-name { color: var(--encre); font-size: 17px; }
.ti-date { font-size: 15px; color: var(--gris); }
.ti-platform-icon { flex: 0 0 auto; line-height: 0; }
.ti-stars { display: flex; align-items: center; gap: 6px; }
.ti-verified { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: #1A73E8; color: #fff; font-size: 11px; align-items: center; justify-content: center; }
.ti-review-content { margin: 10px 0 0; font-size: 17px; color: var(--encre); }
.ti-prev, .ti-next { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ligne); background: var(--blanc); color: var(--encre); font: 700 24px/1 var(--f-texte); cursor: pointer; }
.ti-prev:hover, .ti-next:hover { border-color: var(--marque); color: var(--marque); }
.ti-prev[hidden], .ti-next[hidden] { display: none !important; } /* 28/09 : la feuille de base réaffichait les boutons masqués */
@media (max-width: 991px) { .ti-reviews-container { grid-auto-columns: calc((100% - 16px) / 2); } }
@media (max-width: 767px) { .ti-reviews-container { grid-auto-columns: 88%; } .ti-prev, .ti-next { display: none; } .ti-rating-text { font-size: 19px; } }

/* ── Leurs avis ───────────────────────────────────────────────────────────────────────── */
.pc-avis { padding: 40px 15px 24px; text-align: center; }
.pc-avis h3 { font-family: var(--f-texte); font-size: 24px; font-weight: 400; color: var(--gris); margin: 0 0 6px; }
.pc-avis__note { margin: 0; } .pc-avis__note a { font-weight: 700; }
.pc-avis__ancien { font-size: 16px; margin: 14px 0 0; }
.pc-etoiles { color: #F5B82E; letter-spacing: 2px; }
.pc-avis__rang { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: left; }
.pc-avis__carte { margin: 0; padding: 22px; background: var(--blanc); border: 1px solid var(--ligne); font-size: 17px; }
.pc-avis__carte header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pc-avis__carte header strong { display: block; color: var(--encre); }
.pc-avis__carte header small { font-size: 15px; color: var(--gris); }
.pc-avis__init { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }
.pc-avis__carte p { margin: 8px 0 0; font-size: 17px; color: var(--encre); }

/* ── Contact ──────────────────────────────────────────────────────────────────────────── */
.pc-contact { display: grid; grid-template-columns: 5fr 7fr; gap: 40px; padding: 56px 15px 64px; align-items: start; }
.pc-contact h2 { font-size: clamp(26px, 2.4vw, 32px); color: var(--accent); margin: 0 0 12px; }
.pc-contact__tel { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 22px; color: var(--encre); min-height: 48px; }
.pc-contact__tel svg { color: var(--marque); }
.pc-form { background: var(--blanc); padding: 28px; border: 1px solid var(--ligne); position: relative; }
.pc-form__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.pc-champ { margin-bottom: 16px; }
.pc-champ label { display: block; font-weight: 700; font-size: 17px; margin-bottom: 6px; color: var(--encre); }
.pc-champ input, .pc-champ select, .pc-champ textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid #8C99A5; border-radius: 0; font: inherit; font-size: 18px; color: var(--encre); background: #fff; }
.pc-champ input:focus, .pc-champ select:focus, .pc-champ textarea:focus { border-color: var(--marque); outline: 3px solid rgb(1 116 202 / .25); outline-offset: 0; }
.pc-form .pc-btn { width: 100%; }
.pc-aide { font-size: 16px; margin: 12px 0 0; }

/* ── Leur pied de page (footer-v1), clair ─────────────────────────────────────────────── */
#colophon, #colophon .footer, #colophon .footer-top { background: var(--blanc) !important; }
.site-footer { font-size: 17px; color: var(--gris); border-top: 1px solid var(--ligne); }
.site-footer .footer-v1 .footer-top { padding: 48px 0 28px; }
.site-footer .wp-block-heading, .site-footer .widget-title { font-family: var(--f-texte); font-size: 16px !important; font-weight: 700 !important; letter-spacing: .05em; text-transform: uppercase; color: var(--encre) !important; margin: 0 0 16px; }
.site-footer .pc-pied__spe { text-transform: none; letter-spacing: 0; font-style: italic; font-weight: 400 !important; margin-top: 16px; }
.pc-pied__devise { color: var(--accent); font-family: var(--f-titre); }
.site-footer a { color: var(--accent); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer .footer-v1 ul li { padding-left: 0; margin-bottom: 8px; }
.site-footer .footer-v1 ul.menu li::after { display: none; }
.site-footer .footer-v1 .widget.widget_nav_menu ul li a { color: var(--gris); }
.site-footer .text-label { font-weight: 700; color: var(--encre); }
.site-footer aside { margin-bottom: 24px; }
.site-footer .bottom-footer { background: var(--blanc); border-top: 1px solid var(--ligne); padding: 18px 0; font-size: 15px; text-align: left; }
.footercopyright { text-transform: uppercase; letter-spacing: .04em; }
.pc-legal { text-align: right; }
.pc-barre-appel { display: none; }

/* ── La photo en grand (le système de la v1) ──────────────────────────────────────────── */
.pc-zoom { border: 0; padding: 0; max-width: min(1100px, 94vw); max-height: 92vh; background: transparent; overflow: visible; }
.pc-zoom::backdrop { background: rgb(15 22 30 / .88); }
.pc-zoom figure { margin: 0; background: var(--blanc); }
.pc-zoom img { display: block; max-width: min(1100px, 94vw); max-height: 74vh; width: auto; margin: 0 auto; object-fit: contain; background: #111; }
.pc-zoom figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding: 16px 20px; }
.pc-zoom figcaption strong { font-family: var(--f-titre); font-size: 22px; color: var(--encre); }
.pc-zoom figcaption span { flex: 1 1 260px; font-size: 17px; }
.pc-zoom__fermer, .pc-zoom__nav { position: absolute; z-index: 2; width: 52px; height: 52px; border: 0; background: rgb(255 255 255 / .95); color: var(--encre); font: 700 30px/1 var(--f-texte); cursor: pointer; }
.pc-zoom__fermer { top: 10px; right: 10px; }
.pc-zoom__prec { left: -64px; top: 40%; } .pc-zoom__suiv { right: -64px; top: 40%; }
.pc-zoom[open] figure { animation: pc-zoom-in .45s var(--ease); }
@keyframes pc-zoom-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* ── Plus de mouvement au milieu et en bas de page (Saadou, 26/09) ─────────────────────── */
.pc-titre-trait { position: relative; padding-bottom: 12px; }
.pc-titre-trait::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 64px; height: 3px; margin-left: -32px; background: var(--marque); transform: scaleX(0); transition: transform .9s var(--ease) .2s; }
.pc-titre-trait--gauche::after { left: 0; margin-left: 0; transform-origin: left; }
.pc-titre-trait.est-vu::after { transform: scaleX(1); }
html:not(.js) .pc-titre-trait::after { transform: scaleX(1); }
.js .pc-vignettes li { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .pc-vignettes.est-vu li { opacity: 1; transform: none; }
.js .pc-vignettes.est-vu li:nth-child(2) { transition-delay: .08s; } .js .pc-vignettes.est-vu li:nth-child(3) { transition-delay: .16s; }
.js .pc-vignettes.est-vu li:nth-child(4) { transition-delay: .24s; } .js .pc-vignettes.est-vu li:nth-child(5) { transition-delay: .32s; } .js .pc-vignettes.est-vu li:nth-child(6) { transition-delay: .4s; }
.js .pc-etape .pc-ico * { stroke-dasharray: 160; stroke-dashoffset: 160; transition: stroke-dashoffset 1.4s var(--ease) .3s; }
.js .pc-etapes__rang.est-vu .pc-ico * { stroke-dashoffset: 0; }
.js .ti-reviews-container .ti-review-item { opacity: 0; transform: translateX(40px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .ti-reviews-container.est-vu .ti-review-item { opacity: 1; transform: none; }
.js .ti-reviews-container.est-vu .ti-review-item:nth-child(2) { transition-delay: .15s; } .js .ti-reviews-container.est-vu .ti-review-item:nth-child(3) { transition-delay: .3s; }
.js .pc-form .pc-champ, .js .pc-form .pc-btn { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .pc-form.est-vu .pc-champ, .js .pc-form.est-vu .pc-btn { opacity: 1; transform: none; }
.js .pc-form.est-vu .pc-form__duo:nth-of-type(2) .pc-champ { transition-delay: .1s; } .js .pc-form.est-vu > .pc-champ { transition-delay: .2s; } .js .pc-form.est-vu .pc-btn { transition-delay: .3s; }
.pc-contact__tel svg { animation: pc-sonne 4s ease-in-out 2s infinite; transform-origin: 50% 50%; }
@keyframes pc-sonne { 0%, 86%, 100% { transform: none; } 88% { transform: rotate(-14deg); } 91% { transform: rotate(12deg); } 94% { transform: rotate(-8deg); } 97% { transform: rotate(4deg); } }
.js #colophon .footer-top .row > div { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js #colophon .footer-top .row.est-vu > div { opacity: 1; transform: none; }
.js #colophon .footer-top .row.est-vu > div:nth-child(2) { transition-delay: .1s; } .js #colophon .footer-top .row.est-vu > div:nth-child(3) { transition-delay: .2s; } .js #colophon .footer-top .row.est-vu > div:nth-child(4) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .pc-titre-trait::after { transform: none; transition: none; }
  .js .pc-vignettes li, .js .ti-reviews-container .ti-review-item, .js .pc-form .pc-champ, .js .pc-form .pc-btn, .js #colophon .footer-top .row > div { opacity: 1; transform: none; transition: none; }
  .js .pc-etape .pc-ico * { stroke-dashoffset: 0; transition: none; }
  .pc-contact__tel svg { animation: none; }
}

/* ── Leur apparition au scroll (wow fadeInUp), sans leur librairie ─────────────────────── */
.js [data-anim] { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-anim].est-vu { opacity: 1; transform: none; }
.js .pc-mosaique .pc-tuile { opacity: 0; transform: scale(.97); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .pc-mosaique.est-vu .pc-tuile { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 90ms); }
.js .pc-avis__rang [data-anim]:nth-child(2) { transition-delay: .15s; }
.js .pc-avis__rang [data-anim]:nth-child(3) { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .js [data-anim], .js .pc-mosaique .pc-tuile, .js .pc-etapes__rang .pc-etape { opacity: 1; transform: none; transition: none; }
  .js .pc-diapo.est-active > img { animation: none; }
  .js .pc-zone .c-route, .js .pc-zone .c-cercle { stroke-dashoffset: 0; transition: none; }
  .js .pc-zone .c-com-dedans, .js .pc-zone .c-teinte, .js .pc-zone .c-nom, .js .pc-zone .c-pt { opacity: 1; transition: none; }
}

/* ── Tablette (leur rupture à 991) ──────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .header-v8 .main-nav ul > li { margin: 0 5px; }
  .header-v8 .main-nav ul li a { font-size: 12.5px; }
  .header-v8 .logo img { width: 160px; }
  .pc-diapo__cap { left: 8%; }
}
@media (max-width: 991px) {
  :root { --haut-entete: 68px; }
  .header-v8 .header_wrap { padding: 0 14px; }
  .btn-responsive-nav { display: inline-block; }
  .main-nav { position: fixed; top: var(--haut-entete); left: 0; right: 0; width: auto; height: auto; max-height: 0; overflow: hidden; background: var(--blanc); transition: max-height .45s var(--ease); z-index: 99; box-shadow: 0 12px 24px rgb(42 59 74 / .12); }
  .main-nav.active { max-height: calc(100vh - var(--haut-entete)); overflow-y: auto; }
  .header-v8 .main-nav .primary-menu { padding: 8px 24px 24px !important; text-align: left; }
  .main-nav ul li { display: block; margin: 0 !important; float: none; width: 100%; padding: 0 !important; }
  .header-v8 .main-nav ul li a { padding: 13px 0; font-size: 16px; display: block; }
  .main-navigation ul.children { display: block; position: static; box-shadow: none; border: 0; padding: 0 0 6px 14px; }
  .main-navigation li.menu-item-has-children > a::after { display: none; }
  .vc_row.pc-mosaique { height: 220px; }
  .pc-etiq strong { font-size: 15px; } .pc-etiq span { font-size: 14px; }
  .pc-etapes__rang > .vc_col-sm-3 { width: 50%; }
  .pc-vignettes { grid-template-columns: repeat(3, 1fr); }
  .pc-zoom__prec { left: 8px; top: auto; bottom: 90px; } .pc-zoom__suiv { right: 8px; top: auto; bottom: 90px; }
}

/* ── Téléphone (leur rupture à 767) ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
  body { font-size: 18px; }
  .header-v8 .logo img { width: 150px; }
  .pc-diaporama { height: 88vw; min-height: 0; }
  .pc-diapo--banniere > img { object-position: 30% 50%; }
  .vc_custom_1597836098159, .vc_custom_1597836098159 .vc_inner { margin-left: 0 !important; margin-right: 0 !important; }
  .vc_custom_1597836098159 .wpb_column, .vc_custom_1597836098159 .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; }
  .pc-cadre, .pc-cadre a, .pc-cadre img { display: block; width: 100%; }
  .pc-diapo__cap { left: 12px; right: 12px; top: auto; bottom: 12px; padding: 12px 14px; max-width: none; }
  .pc-diapo__titre { font-size: 30px; margin-bottom: 4px; }
  .pc-diapo__sous { margin-bottom: 0; font-size: 14px; letter-spacing: .01em; }
  .pc-diapo__lien { font-size: 13px; }
  .pc-diapo__lien { min-height: 40px; }
  .pc-diapo__sous { font-size: 15px; }
  .pc-diapo-nums { right: 6px; top: 20px; transform: none; flex-direction: row; }
  .pc-diapo-num { font-size: 14px; min-width: 44px; }
  .pc-diapo-num.est-active { font-size: 18px; }
  .pc-engagements { padding: 10px 14px 8px; }
  .pc-engagements li { padding-top: 2px !important; padding-bottom: 2px !important; }
  .pc-devise { margin-top: 6px !important; }
  .pc-engagements ul { gap: 12px; }
  .pc-engagements li { flex: 1 1 45%; border-left: 0; padding-left: 0; gap: 8px; }
  .pc-engagements li:last-child { flex-basis: 100%; }
  .pc-engagements svg { width: 30px; height: 30px; }
  .pc-engagements span { font-size: 14px; }
  .pc-devise { font-size: 18px; }
  .pc-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
  .vc_row.pc-mosaique { display: contents !important; }
  .pc-tuile { grid-area: auto !important; }
  .pc-tuile a.vc_single_image-wrapper { height: auto; aspect-ratio: 4 / 3; }
  .pc-tuile figure { height: auto; }
  .pc-tuile--picto { grid-column: 1 / -1 !important; }
  #motorisations { grid-column: 1 / -1 !important; }
  #motorisations a.vc_single_image-wrapper { aspect-ratio: 2 / 1; }
  .pc-tuile--picto a.vc_single_image-wrapper { aspect-ratio: 3 / 1; flex-direction: row; }
  .pc-tuile a.vc_single_image-wrapper { align-items: flex-end; }
  .pc-etiq { max-width: none; width: 100%; padding: 8px 8px 9px; background: rgb(20 30 40 / .8); }
  .pc-etiq strong { font-size: 13px; letter-spacing: .03em; }
  .pc-etiq span { font-size: 13px; line-height: 1.3; }
  .pc-tuile--picto .pc-etiq { width: auto; background: none; }
  #colophon [class*=col-] { float: none; width: 100%; }
  .js .pc-mosaique .pc-tuile { opacity: 1; transform: none; }
  .vc_custom_1597836070653 { padding-top: 36px; }
  .wpb_column { width: 100% !important; float: none; }
  .pc-cadre img { max-height: 300px; }
  .pc-vignettes { grid-template-columns: repeat(3, 1fr); }
  .pc-vign span { font-size: 13px; }
  .pc-zone { padding-top: 44px; margin-left: 0 !important; margin-right: 0 !important; }
  .c-nom { font-size: 2.1px; } .c-nom.c-centre { font-size: 3px; }
  .pc-carte-cadre { margin-left: -15px; margin-right: -15px; }
  .pc-carte-cadre figcaption { padding: 0 15px; }
  .pc-etape { margin-bottom: 28px; }
  .pc-etapes__rang > .vc_col-sm-3 { width: 100% !important; }
  .pc-avis__rang { grid-template-columns: 1fr; }
  .pc-contact { grid-template-columns: 1fr; gap: 20px; padding: 44px 0 48px; }
  .pc-form { padding: 20px 16px; }
  .pc-form__duo { grid-template-columns: 1fr; }
  .pc-legal { text-align: left; margin-top: 8px; }
  .pc-barre-appel { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: var(--encre); }
  .pc-barre-appel a { color: #fff; text-align: center; padding: 18px 8px; font-weight: 700; font-size: 17px; min-height: 56px; }
  .pc-barre-appel a + a { background: var(--marque); }
  .pc-zoom__fermer { top: 8px; right: 8px; }
}

/* ── Téléphone, passe du 25/09/2026 (Saadou : « responsive téléphone est nul ») ─────────────
   Posé en DERNIER exprès : leurs règles et les nôtres plus haut redéfinissent les mêmes sélecteurs,
   et une media query n'ajoute aucune spécificité. Chaque ligne répond à un défaut numéroté dans
   etat.md (section du 25/09). Planchers : texte 16 px, cibles 44 px, en-tête à 14 px du bord. */
.pc-insecable { white-space: nowrap; }
@media (min-width: 768px) { span.pc-insecable { white-space: normal !important; } } /* ordinateur : les coupures d'origine, rien ne bouge */
/* Toutes largeurs : un span insécable n'hérite d'AUCUNE règle `… span` (étiquettes, vignettes, engagements). */
span.pc-insecable { display: inline !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; border: 0 !important; background: none !important; font: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; color: inherit !important; }
/* D4 (toutes largeurs) · leur button[type=button] (0,1,1) repeignait les numéros en gris #555 : on rend le blanc voulu. */
.pc-diapo-nums .pc-diapo-num { color: rgb(255 255 255 / .85); }
.pc-diapo-nums .pc-diapo-num.est-active { color: #fff; }
/* D16 (toutes largeurs) · leur button[type=button]:hover/:focus peignait nos boutons en bleu, la croix sombre disparaissait dessus. */
button.pc-zoom__fermer, button.pc-zoom__nav, button.pc-zoom__fermer:hover, button.pc-zoom__fermer:focus, button.pc-zoom__nav:hover, button.pc-zoom__nav:focus { background: rgb(255 255 255 / .95); color: var(--encre); }
button.btn-responsive-nav:hover, button.btn-responsive-nav:focus { background: none; }
button.pc-diapo-num:hover, button.pc-diapo-num:focus { color: #fff; background: none; }
button.pc-vign:hover, button.pc-vign:focus { background: var(--blanc); color: var(--encre); }
button.pc-aa__grand:focus { background: rgb(255 255 255 / .92); color: var(--encre); }
button.pc-aa__grand:hover { background: var(--marque); color: #fff; }
button.ti-prev:hover, button.ti-next:hover, button.ti-prev:focus, button.ti-next:focus { background: var(--blanc); color: var(--marque); }
@media (max-width: 767px) {
  /* D1 · le menu : leur CSS le laisse en visibility:hidden et opacity:0 même ouvert. */
  .main-nav.active { visibility: visible; opacity: 1; left: 0; }
  .header-v8 .main-nav ul li a { min-height: 44px; display: flex; align-items: center; padding: 0 !important; }
  .main-nav .main-navigation ul li { padding-top: 0 !important; padding-bottom: 0 !important; }
  .main-nav.active .main-navigation ul.children { visibility: visible; opacity: 1; transform: none; }
  /* D2 · l'en-tête à 14 px du bord (leur .container ajoutait 15 px). */
  #masthead .container, #masthead .header-fullwidth { padding-left: 0; padding-right: 0; }
  /* D3 · le diaporama : la légende en bandeau plein pied, compacte, la photo reste visible. */
  .pc-diapo__cap { left: 0; right: 0; bottom: 0; padding: 10px 14px 2px; background: rgb(20 30 40 / .72); }
  .pc-diapo__titre { font-size: 26px; margin-bottom: 2px; }
  .pc-diapo__sous { font-size: 16px; letter-spacing: .02em; line-height: 1.3; }
  .pc-diapo__lien { font-size: 16px; letter-spacing: .02em; min-height: 44px; }
  /* D4 · les numéros 01 02 03 : lisibles sur un pilier clair. */
  .pc-diapo-nums { top: 0; right: 0; gap: 0; background: rgb(20 30 40 / .55); }
  .pc-diapo-nums .pc-diapo-num { font-size: 16px; min-width: 44px; min-height: 44px; text-shadow: none; }
  .pc-diapo-nums .pc-diapo-num.est-active { font-size: 18px; }
  /* D5 · la bande des engagements à 16 px. */
  .pc-engagements span { font-size: 16px; letter-spacing: .01em; }
  .pc-engagements svg { width: 26px; height: 26px; }
  /* D6 · les tuiles : l'étiquette passe SOUS la photo, la photo se voit en entier, texte à 16 px. */
  .pc-tuile figure, .pc-tuile a.vc_single_image-wrapper { height: 100%; }
  .pc-tuile a.vc_single_image-wrapper { aspect-ratio: auto; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .pc-tuile img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; flex: 0 0 auto; }
  #motorisations a.vc_single_image-wrapper { aspect-ratio: auto; }
  #motorisations img { aspect-ratio: 2 / 1; }
  .pc-etiq { flex: 1 1 auto; justify-content: flex-start; padding: 10px 10px 12px; background: var(--encre); gap: 4px; }
  .pc-etiq strong { font-size: 16px; letter-spacing: .02em; line-height: 1.25; }
  .pc-etiq span { font-size: 16px; line-height: 1.35; }
  .pc-tuile a:hover .pc-etiq, .pc-tuile a:focus-visible .pc-etiq { transform: none; }
  /* D7 · la phrase d'engagement collée à la liste. */
  .list-service { margin-bottom: 16px; }
  /* D8 · le bouton d'appel : le numéro ne se coupe plus (span insécable), bouton pleine largeur. */
  .pc-appel-milieu .pc-btn { display: block; width: 100%; padding: 14px 16px; line-height: 1.35; text-align: center; }
  .pc-appel-milieu { margin: 32px 0 40px; }
  /* D9 · les vignettes avant/après : deux colonnes, libellés à 16 px, hauteurs égales. */
  .pc-vignettes { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pc-vign { height: 100%; }
  .pc-vign span { font-size: 16px; min-height: 0; padding: 6px 4px; }
  /* D10 · les vides : 150 px avant la zone, 100 px sous le titre des étapes. */
  .vc_custom_1597836098159 { padding-bottom: 16px !important; }
  .vc_custom_1759412468245.pc-zone { padding-top: 32px !important; }
  .pc-etapes { padding-top: 40px; }
  .pc-etapes .modus-headingtitle .shortcode-title h2 { font-size: 26px; margin-bottom: 20px; }
  .vc_custom_1595405820758 { padding-top: 0 !important; padding-bottom: 24px !important; }
  .pc-etape p { font-size: 18px; }
  /* D11 · la carte : les repères secondaires se taisent, les communes clés grossissent. */
  .c-nom { font-size: 2.6px; } .c-nom.c-rep { display: none; } .c-nom.c-centre { font-size: 3.4px; }
  /* 28/09 : le décalage de Montfort-l’Amaury est retiré, il tombait sur Les Essarts-le-Roi ; la police plus petite suffit. */
  .pc-carte-cadre figcaption { font-size: 16px; }
  /* D12 · les avis : date en entier, coche lisible. */
  .ti-inner { padding: 18px 16px; }
  .ti-date { font-size: 16px; }
  .ti-verified { width: 20px; height: 20px; font-size: 13px; }
  /* D13 · la visionneuse : flèches en haut de la photo, plus sur la légende. */
  .pc-zoom__prec { left: 8px; right: auto; top: 8px; bottom: auto; }
  .pc-zoom__suiv { left: 68px; right: auto; top: 8px; bottom: auto; }
  .pc-zoom figcaption span { font-size: 16px; }
  /* D14 · le pied : bloc « Notre entreprise » aligné, cibles à 44 px. */
  .site-footer .footer-info-v1 li { padding-left: 0 !important; }
  .site-footer .widget_block p br { display: none; }
  .site-footer .widget_block p a, .site-footer .footer-v1 .widget.widget_nav_menu ul li a { display: flex; align-items: center; min-height: 44px; }
  .site-footer .footer-v1 ul li { margin-bottom: 0; }
  .site-footer .footer-info-v1 li { margin-bottom: 10px; }
  .site-footer .footer-info-v1 a { display: inline-flex; align-items: center; min-height: 44px; }
  /* D15 · le bas de page à 16 px, liens légaux à 44 px. */
  .site-footer .bottom-footer { font-size: 16px; }
  .footercopyright a, .pc-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer .bottom-footer .footercopyright { font-size: 16px; }
  .pc-legal a { min-width: 44px; justify-content: center; }
  /* D17 · avant/après : étiquettes et « Voir en grand » à 16 px ; le logo de l'en-tête, cible de 44 px. */
  .pc-aa__etiq, button.pc-aa__grand { font-size: 16px; }
  .header-v8 .logo_home a { display: flex; align-items: center; min-height: 44px; }
}

/* ── Téléphone, passe 2 du 25/09/2026 (Saadou : « en fait y a rien qui va ») ────────────────
   Consignes appliquées à la lettre, téléphone seulement : (1) section 1, le texte réduit fortement,
   la photo domine, numéros 1 2 3 verticaux sur le bord droit comme sur ordinateur ; (2) engagements
   refaits en liste régulière, 3 points sur 5 (« Conseil personnalisé » et « Rénovation & neuf »
   masqués ici, visibles sur ordinateur) ; (3) tuiles : les noms seuls ; (4) vignettes avant/après
   centrées, aucune ne peut dépasser ; (5) texte : marges 12/15/14, titres équilibrés, pas d'orpheline. */
@media (max-width: 767px) {
  /* (5) marges : le cadre à 12 px du bord, le contenu d'une carte à 15 px du cadre, l'en-tête à 14 px. */
  .container { padding-left: 12px; padding-right: 12px; }
  .pc-page .vc_row { margin-left: 0 !important; margin-right: 0 !important; }
  .pc-page .wpb_column, .pc-page .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; }
  #masthead .container, #masthead .header-fullwidth { padding-left: 0; padding-right: 0; }
  body { font-size: 18px; line-height: 1.55; }
  .wpb_text_column p, .wpb_text_column li { font-size: 18px; line-height: 1.55; }
  p, li, figcaption, .ti-review-content { text-wrap: pretty; }
  h1, h2, h3, .pc-diapo__titre, .pc-etiq strong { text-wrap: balance; }
  .vc_custom_1597836070653 h1 { font-size: 30px; line-height: 1.12; margin-bottom: 14px; }
  .vc_custom_1597836098159 h2, .pc-zone h2, .pc-contact h2 { font-size: 26px; line-height: 1.15; margin: 32px 0 12px; }
  .pc-contact h2 { margin-top: 0; }
  .vc_custom_1597836098159 h3 { font-size: 22px; margin: 24px 0 10px; }
  /* Un long paragraphe centré se lit mal sur 360 px : aligné à gauche, comme le reste du texte courant. */
  .pc-zone p[style*=center], .pc-zone .wpb_text_column p { text-align: left !important; }
  .pc-zone h2 { text-align: left !important; }

  /* (1) Section 1 : le texte réduit fortement, sans encadré ; un voile bas pour la lecture
     (raison écrite, règle 19 : du texte blanc posé sur une photo claire doit rester lisible). */
  .pc-diapo:not(.pc-diapo--banniere)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(to top, rgb(15 22 30 / .72), rgb(15 22 30 / 0)); z-index: 1; pointer-events: none; }
  .pc-diapo__cap { z-index: 2; left: 0; right: 56px; bottom: 0; top: auto; padding: 0 12px 0; background: none; max-width: none; }
  .pc-diapo__titre { font-size: 22px; line-height: 1.1; margin: 0 0 2px; text-shadow: 0 1px 3px rgb(0 0 0 / .5); }
  .pc-diapo__sous { font-size: 12px; letter-spacing: .08em; line-height: 1.3; margin: 0; }
  .pc-diapo__lien { font-size: 12px; letter-spacing: .08em; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
  /* Numéros 1 2 3 : verticaux, sur le bord droit de l'image, comme sur ordinateur. */
  .pc-diapo-nums { top: 50%; right: 4px; transform: translateY(-50%); flex-direction: column; gap: 0; background: none; }
  .pc-diapo-nums .pc-diapo-num { min-width: 44px; min-height: 44px; font-size: 14px; text-shadow: 0 0 6px rgb(0 0 0 / .75), 0 1px 2px rgb(0 0 0 / .8); }
  .pc-diapo-nums .pc-diapo-num.est-active { font-size: 18px; }

  /* (2) Engagements : trois lignes régulières, pictogramme dans une colonne fixe, un filet entre chaque. */
  .pc-engagements { padding: 6px 12px 16px; }
  .pc-engagements ul { display: block; }
  .pc-engagements li:nth-child(2), .pc-engagements li:nth-child(5) { display: none !important; }
  .pc-engagements li { display: grid; grid-template-columns: 28px 1fr; align-items: center; column-gap: 14px; padding: 13px 0 !important; border-left: 0; border-bottom: 1px solid rgb(255 255 255 / .14); }
  .pc-engagements li:nth-child(4) { border-bottom: 0; }
  .pc-engagements svg { width: 28px; height: 28px; }
  .pc-engagements span { font-size: 17px; line-height: 1.3; letter-spacing: 0; text-transform: none; color: rgb(255 255 255 / .82); }
  .pc-engagements strong { display: inline; font-weight: 700; color: #fff; }
  .pc-devise { margin-top: 12px; font-size: 18px; }

  /* (3) Tuiles : les noms seuls, sous la photo. */
  .pc-tuiles { padding: 12px; gap: 8px; }
  .pc-etiq > span { display: none; }
  .pc-etiq { justify-content: center; padding: 10px 8px; }
  .pc-etiq strong { font-size: 16px; letter-spacing: .03em; line-height: 1.25; }

  /* (4) Vignettes avant/après : deux colonnes qui ne peuvent pas s'élargir (minmax(0,1fr)), centrées. */
  .pc-vignettes { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 100%; margin-left: auto; margin-right: auto; justify-items: stretch; }
  .pc-vignettes li { min-width: 0; }
  .pc-vign { min-width: 0; max-width: 100%; }
  .pc-vign img { max-width: 100%; }
  .pc-aa, .pc-aa__cadre { max-width: 100%; }

  /* (5) Cartes : contenu à 15 px du cadre. */
  .pc-form { padding: 18px 15px; }
  .ti-inner { padding: 16px 15px; }
  .pc-avis { padding-left: 0; padding-right: 0; }
  .ti-reviews-container { padding: 4px 0; }
  .pc-carte-cadre { margin-left: -12px; margin-right: -12px; }
  .pc-carte-cadre figcaption { padding: 0 12px; }
  .pc-etapes__rang, .pc-etapes .vc_row { margin-left: 0 !important; margin-right: 0 !important; }
  .pc-etapes .wpb_column, .pc-etapes .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: none !important; }
  .pc-etape p { margin-bottom: 8px; }
  .pc-etape { margin-bottom: 20px; }
  .pc-zone h2 { margin-top: 0; }
  #colophon .row { margin-left: -12px; margin-right: -12px; }
  #colophon [class*=col-] { padding-left: 12px; padding-right: 12px; }
  /* Pied : chaque ligne de « Notre entreprise » a la même hauteur, les liens légaux le même écart. */
  .site-footer .footer-info-v1 li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; min-height: 44px; margin-bottom: 4px; }
  .site-footer .footer-info-v1 a { min-height: 44px; }
  .pc-legal a { min-width: 0; padding: 0 6px; }
  .pc-legal a:first-child { padding-left: 0; }
}

/* ── Téléphone, passe du 26/09/2026 (Saadou) — posé en DERNIER, après les passes du 25/09 ──────────
   (1) la photo de la section 1 plus haute, cadrée pour garder « PORTECLOSE » entier ;
   (2) les légendes de la section 1 sans écarts : lettres non espacées, « Je fais confiance / à Porteclose » ;
   (3) la section 2 (bande des engagements) : moins de marge entre le texte et ses bords haut et bas ;
   (4) les avis : le « Lire la suite » de leur widget, sans cadre. La barre d'appel du bas est retirée du HTML. */
@media (max-width: 767px) {
  /* 28/09, Saadou : « entière, moins haute ». La hauteur suit le rapport de la bannière (1536 × 858) :
     à 75vw, ses bords (« Votre extérieur », les tuiles Fenêtres et Garde-corps) étaient coupés. */
  .pc-diaporama { height: calc(100vw * 858 / 1536); min-height: 0; max-height: none; }
  .pc-diapo--banniere > img { object-position: 50% 50%; }
  .pc-diapo__cap p { text-align: left !important; word-spacing: normal; }
  .pc-diapo__titre { margin-bottom: 4px; }
  .pc-diapo__sous { font-size: 13px; letter-spacing: .01em; line-height: 1.25; margin: 0; }
  .pc-diapo__lien { font-size: 13px; letter-spacing: .01em; min-height: 40px; }
  .pc-engagements { padding: 4px 12px 8px; }
  .pc-engagements li { padding: 7px 0 !important; }
  .pc-devise { margin-top: 6px; }
  .ti-read-more, button.ti-read-more { border: 0 !important; background: none !important; padding: 4px 0 0 !important; min-height: 32px; }
}
button.ti-read-more, button.ti-read-more:hover, button.ti-read-more:focus { border: 0; background: none; color: #6f6f6f; }

/* ── Passe 3, 28/09/2026 (retour de Kévin) ─────────────────────────────────────────────────── */
/* Diaporama : ses phrases, plus longues que les anciens mots-titres, donc plus petites. */
.pc-diapo__titre { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; max-width: 16ch; }
/* L'album de chantier, à la suite des avant/après : six vignettes, la photo en grand au clic. */
.pc-album { margin: 56px 0 8px; }
.pc-album h3 { text-align: center; margin-bottom: 22px; }
.pc-album__grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.pc-album__lien { display: block; overflow: hidden; aspect-ratio: 3 / 4; }
.pc-album__lien img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
/* Installation et mise en conformité : son texte, en colonne de lecture. */
.pc-install { max-width: 820px; margin: 0 auto; padding: 64px 0 24px; text-align: left; }
.pc-install__chapo { font-family: var(--f-titre); font-size: 22px; font-weight: 600; color: var(--encre); }
.pc-install__fin { font-weight: 700; color: var(--accent); margin-top: 18px; }
.pc-contact__horaires { margin-top: 10px; }
/* La tuile sans photo porte une phrase longue (celle de Kévin) : pictogramme et titre plus serrés, la phrase entière. */
.pc-tuile--picto .pc-tuile__picto svg { width: 44px; height: 44px; }
.pc-tuile--picto .pc-etiq { padding: 6px 12px; gap: 6px; max-width: 94%; }
.pc-tuile--picto .pc-etiq strong { line-height: 1.2; }
.pc-tuile--picto .pc-etiq span { font-size: 14.5px; line-height: 1.35; }
@media (max-width: 991px) { .pc-album__grille { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) {
  .pc-diapo__titre { font-size: 24px; max-width: 14ch; }
  .pc-album { margin-top: 40px; }
  .pc-album__grille { gap: 6px; }
  .pc-install { padding: 44px 15px 8px; text-align: left; }
  .pc-install__chapo { font-size: 19px; }
  /* 21 villes sur 390 px : la police des étiquettes descend, sinon elles se touchent (mesuré le 28/09). */
  .c-nom { font-size: 1.95px; } .c-nom.c-centre { font-size: 3px; }
}

/* ── 28/09, Saadou : section 3 sur ordinateur, « le texte déroule mais la photo reste fixe ».
   Le collant : la colonne photo s'étire à la hauteur du texte, la photo y reste accrochée sous l'en-tête
   pendant que le texte défile. Jamais sous 992 px (règle du mouvement : pas de collant sur téléphone). */
@media (min-width: 992px) {
  .pc-intro { display: flex; align-items: stretch; }
  .pc-intro > .wpb_column { float: none; align-self: stretch !important; height: auto !important; }
  .pc-intro__photo > .vc_column-inner, .pc-intro__photo .wpb_wrapper { height: 100%; }
  .pc-intro__photo .wpb_single_image { position: sticky; top: 88px; }
}

/* 28/09 : le H1 passe dans la colonne de gauche (Saadou) ; il garde le style qu'il avait au-dessus des deux colonnes. */
.pc-intro__titre h1 { font-family: var(--f-titre); font-size: 36px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--encre); margin: 0 0 18px; }
@media (max-width: 767px) { .pc-intro__titre h1 { font-size: 30px; margin-bottom: 14px; } }
.pc-intro__titre { margin-bottom: 18px !important; }

/* 28/09, Saadou : « le blabla tu me le mets plus bas de la photo, là on voit même pas la photo ».
   Ordinateur : l'étiquette quitte le centre et se pose en bas de la tuile, sur toute sa largeur. */
@media (min-width: 768px) {
  .pc-tuile:not(.pc-tuile--picto) a.vc_single_image-wrapper { align-items: flex-end; }
  .pc-tuile:not(.pc-tuile--picto) .pc-etiq { max-width: none; width: 100%; padding: 26px 16px 10px; gap: 2px; background: linear-gradient(to top, rgb(15 22 30 / .88) 0%, rgb(15 22 30 / .7) 55%, rgb(15 22 30 / 0) 100%); text-shadow: 0 1px 2px rgb(0 0 0 / .45); }
  .pc-tuile:not(.pc-tuile--picto) a:hover .pc-etiq, .pc-tuile:not(.pc-tuile--picto) a:focus-visible .pc-etiq { background: linear-gradient(to top, rgb(1 116 202 / .92) 0%, rgb(1 116 202 / .75) 55%, rgb(1 116 202 / 0) 100%); }
  .pc-tuile:not(.pc-tuile--picto) .pc-etiq strong { font-size: 15px; line-height: 1.2; }
  .pc-tuile:not(.pc-tuile--picto) .pc-etiq span { font-size: 14px; line-height: 1.3; }
  .pc-tuile:not(.pc-tuile--picto) a:hover .pc-etiq, .pc-tuile:not(.pc-tuile--picto) a:focus-visible .pc-etiq { transform: none; }
}

/* 28/09, Saadou : pas de bande bleu foncé sous l'en-tête (bordure héritée de la feuille de base). */
#header_v8 { border-bottom: 0 !important; }
/* 28/09 : pied allégé, trois colonnes ; les communes en un paragraphe court au lieu de seize lignes. */
.pc-pied__zone { font-size: 15px; line-height: 1.6; margin: 0; max-width: 34ch; }
#colophon .pc-pied__zone, #colophon p { text-align: left !important; word-spacing: normal; }
#colophon .footer-info-v1 li { margin: 0 0 6px !important; padding: 0 !important; line-height: 1.5; }
#colophon .footer-info-v1 ul { margin: 0; padding: 0; }
#colophon .pc-pied__spe { margin: 12px 0 0 !important; }
#colophon .widget { margin-bottom: 18px; }
@media (max-width: 767px) { #colophon .footer-top { padding-top: 24px; padding-bottom: 8px; } #colophon .footer-info-v1 li { margin-bottom: 4px !important; } }

/* ══ 28/09 — LES ANIMATIONS, refaites (Saadou : « t'as mis que du quand j'arrive, puis plus rien, et t'as
   multiplié la même animation »). Plan validé le 28/09 : un motif par section, deux sections voisines jamais
   le même. Seuls transform et opacité bougent. ══ */

/* 0. Les apparitions génériques répétées sont retirées : texte, titres, vignettes, avis, formulaire, pied. */
.js [data-anim], .js .pc-vignettes li, .js .ti-reviews-container .ti-review-item, .js .pc-form .pc-champ, .js .pc-form .pc-btn,
.js #colophon .footer-top .row > div, .js .pc-mosaique .pc-tuile, .js .pc-engagements li, .js .pc-etapes__rang .pc-etape { opacity: 1 !important; transform: none !important; transition: none !important; }
.pc-titre-trait::after { transform: scaleX(1) !important; transition: none !important; }
.js .pc-etapes__rang .pc-ico * { stroke-dashoffset: 0 !important; transition: none !important; }

/* 2. Bande bleu foncé : les 5 pictos se dessinent trait par trait, l'un après l'autre. */
.js .pc-engagements svg * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease); }
.js .pc-engagements.est-vu svg * { stroke-dashoffset: 0; }
.js .pc-engagements.est-vu li:nth-child(2) svg * { transition-delay: .25s; }
.js .pc-engagements.est-vu li:nth-child(3) svg * { transition-delay: .5s; }
.js .pc-engagements.est-vu li:nth-child(4) svg * { transition-delay: .75s; }
.js .pc-engagements.est-vu li:nth-child(5) svg * { transition-delay: 1s; }

/* 3. Tuiles : un volet roulant (lames) couvre la photo et se lève. Ordinateur : piloté par le défilement (JS) ;
   téléphone : il se lève quand la rangée arrive. */
.pc-volet { position: absolute; inset: 0; z-index: 3; pointer-events: none; transform-origin: 50% 0; transform: scaleY(1);
  background: repeating-linear-gradient(to bottom, #2A3B4A 0 13px, #22303c 13px 15px); }
html:not(.js) .pc-volet { display: none; }
@media (max-width: 991px) {
  .pc-volet { transition: transform 1.1s var(--ease); }
  .pc-tuile.est-vu .pc-volet { transform: scaleY(0); }
}

/* 5. Avant/après : sur ordinateur, le curseur suit le défilement (JS) ; au premier contact il rend la main. */

/* 7. Les 4 étapes : une ligne relie les pictos et se remplit au défilement ; chaque étape s'allume à son tour. */
.pc-etapes__rang { position: relative; }
.pc-etapes__ligne { display: none; }
.pc-etape .pc-ico { transition: transform .5s var(--ease), color .5s var(--ease), opacity .5s var(--ease); }
@media (min-width: 992px) {
  .pc-etapes__ligne { display: block; position: absolute; height: 2px; background: var(--ligne); z-index: 0; }
  .pc-etapes__ligne span { position: absolute; inset: 0; background: var(--marque); transform-origin: 0 50%; transform: scaleX(0); }
  .js .pc-etape .pc-ico { opacity: .35; }
  .js .pc-etape.est-allume .pc-ico { opacity: 1; transform: scale(1.15); }
}
@media (max-width: 991px) {
  .js .pc-etape .pc-ico { opacity: .35; }
  .js .pc-etape.est-vu .pc-ico { opacity: 1; transform: scale(1.12); }
}

/* 8. Installation : l'accroche arrive mot par mot. */
.pc-mot { display: inline-block; }
.js .pc-install__chapo .pc-mot { opacity: 0; transform: translateY(.5em); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 70ms); }
.js .pc-install__chapo.est-vu .pc-mot { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pc-volet { display: none; }
  .js .pc-engagements svg * { stroke-dashoffset: 0; transition: none; }
  .js .pc-etape .pc-ico { opacity: 1; transform: none; }
  .js .pc-install__chapo .pc-mot { opacity: 1; transform: none; transition: none; }
}

/* ── 28/09, Saadou : « sur téléphone, sur la fin de la page tu n'as plus rien ». Trois motifs, trois sections. */
/* 9. Avis : la barre de rythme se remplit en 5 s avant l'avis suivant (seulement quand les avis défilent). */
.pc-avis__rythme { display: none; width: 120px; height: 3px; margin: 14px auto 0; background: var(--ligne); overflow: hidden; }
.pc-avis__rythme span { display: block; height: 100%; background: var(--marque); transform-origin: 0 50%; transform: scaleX(0); }
.pc-avis__rythme.est-auto { display: block; }
.pc-avis__rythme.est-auto span { animation: pc-rythme 5s linear both; }
@keyframes pc-rythme { to { transform: scaleX(1); } }
/* 10. Devis : un reflet traverse le bouton d'envoi de temps en temps. */
.pc-form button[type="submit"] { position: relative; overflow: hidden; }
.pc-form button[type="submit"]::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / .35), transparent); transform: translateX(0) skewX(-18deg); animation: pc-reflet 5s ease-in-out 1.5s infinite; pointer-events: none; }
@keyframes pc-reflet { 0%, 70% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(520%) skewX(-18deg); } }
/* 11. Pied : la devise s'allume mot après mot, en boucle lente. */
.pc-pied__devise span { animation: pc-devise 6s ease-in-out infinite; }
.pc-pied__devise span:nth-child(2) { animation-delay: 2s; }
.pc-pied__devise span:nth-child(3) { animation-delay: 4s; }
@keyframes pc-devise { 0%, 100% { opacity: .45; } 15%, 35% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .pc-avis__rythme { display: none !important; }
  .pc-form button[type="submit"]::after, .pc-pied__devise span { animation: none; }
}

/* 28/09, Saadou : la décennale mise en avant sans section (pastille + ligne dans « Porteclose assure »). */
.pc-decennale { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 6px 12px 6px 8px; font-size: 15px; font-weight: 600; color: var(--accent); background: rgb(1 116 202 / .08); border: 1px solid rgb(1 116 202 / .25); }
.pc-appel-milieu { display: flex; flex-direction: column; align-items: center; }
.pc-appel-milieu + .pc-decennale { display: flex; width: fit-content; margin: 12px auto 0; }
.pc-appel-milieu { margin-bottom: 0 !important; } .pc-appel-milieu + .pc-decennale { margin-bottom: 35px; }

/* 30/09 : la mosaïque rangée par les paires de Kévin. Ordinateur : une rangée par groupe, colonnes égales. */
@media (min-width: 768px) {
  .vc_row.pc-mosaique.pc-rangee { grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: 1fr; }
  .vc_row.pc-mosaique.pc-rangee--basse { height: 280px; }
  .vc_row.pc-mosaique.pc-rangee--haute { height: 440px; }
  .vc_row.pc-mosaique.pc-rangee--moyenne { height: 340px; }
  .pc-rangee .pc-tuile { grid-area: auto !important; }
}