/* ============================================================================
   accueil-claire.css - page d'ACCUEIL Acronet, version « ile claire »
   ----------------------------------------------------------------------------
   Chargee UNIQUEMENT par l'accueil, apres theme.css / custom.css (head-css.php)
   et apres light.css. Rien ici ne pese sur les autres pages.

   CE QUE CE FICHIER EST, ET N'EST PAS
   L'accueil n'invente aucun composant : elle reutilise ceux de la charte
   (theme.css) et de l'ile claire (light.css). Ce fichier ne contient donc que
   TROIS choses :
     1. les quelques composants propres a la page (hero, vagues, bande sombre,
        invitation a l'avis Google) ;
     2. les CORRECTIONS des composants sombres reutilises sur fond clair -
        chaque regle de cette famille existe pour une raison mesuree, jamais
        pour un gout : voir les commentaires ;
     3. le composant « secteurs », rapatrie de accueil.css (voir § 4).

   ⚠️ TOUT EST SCOPE `.pd-fiche` (l'ile claire, posee sur le <div> de <main>) :
   aucune regle ne peut fuir sur le reste du site, ni sur la navbar, ni sur le
   pied de page, qui restent sombres.

   SOMMAIRE
     1. Hero (scene d'appareils + ligne de spec)
     2. Echelle des titres hors gabarit
     3. Vagues et bandes sombres
     4. Secteurs - « Quatre metiers, quatre discours »
     5. Packs - slider decale
     6. Boutique - « Cle en main »
     7. Avis clients - bandeau defilant + invitation Google
     8. FAQ en 1/3 + 2/3
     9. Appel final
    10. Accessibilite (focus clavier, mouvement reduit)
   ============================================================================ */


/* ============================================================================
   1. HERO
   ============================================================================ */

/* La navbar est en position:fixed, elle ne prend aucune place dans le flux :
   sans ce retrait le h1 passerait dessous (les autres pages claires ont un fil
   d'Ariane qui joue ce role, l'accueil n'en a pas). */
.pd-fiche .v5-hero{padding:calc(var(--acro-nav-h) + 3.75rem) 0 3.5rem}

/* La colonne visuelle est bornee a la largeur qu'elle avait sur l'ancienne
   home (une col-lg-5 de conteneur Bootstrap, ~500px). Sans cette borne, l'ile
   claire elargit le conteneur a 95em : le telephone reste colle a gauche
   pendant que le portable file a droite, et la composition se dissout. */
.pd-fiche .v5-hero-visual{position:relative;width:100%;max-width:32rem;margin-inline:auto}
.pd-fiche .v5-hero-visual::before{
	content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	width:88%;height:88%;border-radius:50%;z-index:0;pointer-events:none;
	background:radial-gradient(circle,rgba(var(--primary-medium-rgb),.16),transparent 70%);
}

/* --- La scene d'appareils vient de la home SOMBRE ------------------------- */
/* Ses chassis restent navy : c'est voulu, un portable est sombre, et ce sont
   les seuls encarts fonces du premier ecran. Trois details seulement ne
   suivaient pas le changement de fond. */
/* a) Deux libelles lisaient un token que l'ile claire repeint en bleu nuit. */
.pd-fiche .device-caption-name{color:#fff}
.pd-fiche .v3-vcard-value{color:#fff}
/* b) La pastille est un verre SOMBRE a 65% : sur la home sombre elle reste
      quasi noire, sur l'ile claire elle laissait remonter le fond et virait au
      gris moyen - le libelle bleu clair y tombait a 2,87:1. On l'opacifie. */
.pd-fiche .device-caption-pill{background:rgba(8,12,24,.92)}
.pd-fiche .device-caption-pill:hover{background:rgba(8,12,24,.97)}
/* c) ⚠️ Defaut herite de l'ancienne home et corrige ICI : la vignette « Avis
      Google » et la pastille « Derniere realisation » visaient toutes les deux
      le bas de la scene, si bien que le nom du site passait SOUS la vignette et
      ressortait tronque (« Ma Carte Electroni… »). On remonte la vignette au
      coin du portable, comme les trois autres : plus rien ne se recouvre. */
.pd-fiche .v3-vcard--rating{bottom:16%;right:-48px}
/* La barre de la vignette SEO part de zero : le JS l'anime jusqu'a sa valeur
   cible au chargement. Etat initial en CSS plutot qu'en style="" sur la balise. */
.pd-fiche .v3-vcard--seo .progress-bar{width:0}

/* --- La ligne de spec ----------------------------------------------------- */
/* Signature typographique de la page. Elle vient du monde reel d'Acronet : les
   visuels des modules vendus se terminent tous par une ligne de compatibilite
   en petites capitales separee par des points medians. Police a chasse fixe
   SYSTEME : aucune requete reseau, l'objectif Lighthouse reste tenu. */
.pd-fiche .v5-spec{
	font-family:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Consolas,monospace;
	font-size:.7rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
	color:rgba(var(--primary-dark-rgb),.8);
	display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;
	margin:1.75rem 0 0;padding:0;list-style:none;
}
.pd-fiche .v5-spec li{display:flex;align-items:center;gap:.5rem}
/* Le point median est GENERE, jamais tape : il ne doit ni etre lu par un
   lecteur d'ecran, ni survivre a un copier-coller. */
.pd-fiche .v5-spec li + li::before{content:'\00B7';color:rgba(var(--primary-medium-rgb),.75)}
.pd-fiche .v5-spec b{font-weight:700;color:rgba(var(--primary-darkest-rgb),1)}

@media(max-width:991.98px){
	.pd-fiche .v5-hero{padding-top:calc(var(--acro-nav-h) + 2rem)}
	.pd-fiche .v5-spec{justify-content:center;margin-top:1.5rem}
}
@media(max-width:575.98px){
	.pd-fiche .v5-spec{font-size:.66rem;gap:.35rem .5rem}
}


/* ============================================================================
   2. ECHELLE DES TITRES HORS GABARIT
   ----------------------------------------------------------------------------
   ⛔ PIEGE : theme.css met TOUS les titres en `font-size:inherit`. Un <h2> nu
   sort donc a 1rem. L'echelle est portee par .section-title sur les pages
   sombres et par .of-sec-head h2 sur les pages claires - les deux en-tetes
   ci-dessous ne sont ni dans l'un ni dans l'autre (colonne editoriale du
   slider de packs, en-tete de la bande d'avis) : ils reclament l'echelle
   explicitement, sinon leur titre passe en corps de texte.
   ============================================================================ */
.pd-fiche .offset-swiper-editorial h2,
.pd-fiche .avis-head h2{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:800;letter-spacing:-.015em;line-height:1.15;margin:.35rem 0 0}


/* ============================================================================
   3. VAGUES ET BANDES SOMBRES
   ----------------------------------------------------------------------------
   Les vagues cassent l'empilement de rectangles entre deux sections. Masque SVG
   en data-URI : aucune requete reseau, aucune image a maintenir.
   ⚠️ REGLE D'OR : une vague est peinte de la couleur de CE QUI ENTOURE la
   bande, jamais de la sienne. D'ou la variable --v5-wave-color, posee par la
   section, avec le fond de l'ile pour valeur par defaut.
   ============================================================================ */

/* Deux <span> plutot que ::before/::after : les fonds concernes utilisent deja
   leur propre ::before pour une tache radiale. */
.pd-fiche .v5-wave{
	position:absolute;left:0;right:0;height:48px;z-index:3;pointer-events:none;
	background-color:var(--v5-wave-color,var(--pd-bg));
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
	-webkit-mask-position:center;mask-position:center;
	-webkit-mask-size:100% 100%;mask-size:100% 100%;
	-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0,40 C300,80 900,0 1200,40 L1200,0 L0,0 Z'/%3E%3C/svg%3E");
	mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0,40 C300,80 900,0 1200,40 L1200,0 L0,0 Z'/%3E%3C/svg%3E");
}
.pd-fiche .v5-wave-top{top:-1px}
.pd-fiche .v5-wave-bottom{bottom:-1px;transform:scaleY(-1)}
/* 4,5rem = 72px, soit plus que les 48px de vague : le contenu ne passe jamais
   dessous. */
.pd-fiche .v5-waved{padding-top:4.5rem;padding-bottom:4.5rem}

/* --- Bande sombre generique (avis) ---------------------------------------- */
/* Meme degrade que la section FAQ sombre de light.css : navy vers halo rouge.
   ⛔ MAIS EN VERSION OPAQUE, et c'est tout le sujet : l'original finit sur
   `rgba(245,5,56,.10)`, un rouge a 10% qui se melange a CE QU'IL Y A DERRIERE.
   Sur une page sombre il vire au prune ; sur l'ile claire il virait au rose
   pale - mesure : le bout droit de la bande tombait a #E9D6DF, et le titre
   blanc dessus a 1,39:1. On ecrit donc directement les trois couleurs telles
   qu'elles sortent sur fond navy (#2e203f = ce meme rouge a 10% aplati). */
.pd-fiche .v5-band-dark{
	position:relative;overflow:hidden;
	--v5-wave-color:var(--pd-bg);
	background:linear-gradient(135deg,#0b2540 0%,#192340 50%,#2e203f 100%);
}
.pd-fiche .v5-band-dark::before{
	content:'';position:absolute;top:0;right:0;width:400px;height:400px;
	background:radial-gradient(circle,rgba(245,5,56,.12) 0%,transparent 70%);
	border-radius:50%;transform:translate(30%,-30%);pointer-events:none;
}
.pd-fiche .v5-band-dark > .container{position:relative;z-index:2}
.pd-fiche .v5-band-dark h2,.pd-fiche .v5-band-dark h3{color:#fff}
.pd-fiche .v5-band-dark .of-eyebrow{color:#7fb2ea}
.pd-fiche .v5-band-dark .of-sec-lead{color:rgba(255,255,255,.82)}


/* ============================================================================
   4. SECTEURS - « Quatre metiers, quatre discours »
   ----------------------------------------------------------------------------
   Composant RAPATRIE de assets/css/accueil.css (§ SECTEURS), pour que l'accueil
   n'ait plus a charger ce fichier de 33 Ko dont elle n'utilisait que ces
   90 lignes. accueil.css reste en place tant que index-v2/v3/v4 existent ;
   il devient supprimable le jour ou ces brouillons partent.

   Principe conserve : chaque carte expose une variable locale --acc (accent) et
   --acc-rgb, et toutes ses regles internes s'y referent. Ajouter une couleur =
   une ligne, pas un bloc de regles.
   ⚠️ L'ORDRE DES DEUX PREMIERS BLOCS COMPTE : le repli et les classes d'accent
   ont la meme specificite (0,1,0), a egalite c'est le dernier declare qui
   gagne. Le repli doit donc venir EN PREMIER.
   ============================================================================ */

/* Repli : une carte sans classe d'accent reste lisible. */
.pd-fiche .acr-sector{--acc-rgb:var(--primary-medium-rgb);--acc:rgb(var(--primary-medium-rgb))}

/* Accents. Trois des quatre sont calibres pour du texte sur fond navy et
   echouent sur fond clair : le cyan #36e3ff donne 1,6:1 sur blanc, l'orange
   #ff611c 3,1:1, le rouge de charte 4,2:1 - et le sur-titre de carte fait
   11,7px, donc il lui faut 4,5:1. Chacun descend a sa version « encre ».
   ⚠️ Les seuils sont pris sur le FOND REEL DE LA CARTE, pas sur du blanc : la
   carte finit sur un voile de son propre accent, rgba(--acc,.07). C'est ce
   detail qui recale les valeurs d'un cran de plus (mesures faites avec
   screenshots/audit-contraste.js, qui aplatit les couches translucides).
   ⚠️ Chaque regle redefinit --acc ET --acc-rgb : l'un derive toujours de
   l'autre, n'en changer qu'un casserait le composant. */
.pd-fiche .acr-acc-blue  {--acc-rgb:var(--primary-medium-rgb);--acc:rgb(var(--primary-medium-rgb))}
.pd-fiche .acr-acc-fluo  {--acc-rgb:21,94,117;--acc:rgb(21,94,117)}   /* 6,0:1 */
.pd-fiche .acr-acc-orange{--acc-rgb:154,52,18;--acc:rgb(154,52,18)}   /* 5,6:1 */
.pd-fiche .acr-acc-red   {--acc-rgb:176,7,38;--acc:rgb(176,7,38)}     /* 5,4:1 */

/* Grille : le responsive vient de la grille, pas d'un empilement de media
   queries. */
.pd-fiche .acr-sectors{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));
	gap:1.1rem;
}
.pd-fiche .acr-sector{
	display:flex;flex-direction:column;
	padding:1.6rem;border-radius:1rem;
	background:linear-gradient(165deg,var(--surface-card) 55%,rgba(var(--acc-rgb),.07) 100%);
	border:1px solid var(--glass-border);
	transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.pd-fiche .acr-sector:hover{
	transform:translateY(-6px);
	border-color:rgba(var(--acc-rgb),.3);
	box-shadow:0 14px 40px rgba(16,53,89,.14);
}
/* En-tete : icone A GAUCHE, titre et sur-titre a droite. Seule sur sa ligne,
   l'icone laissait un vide a sa droite dans chacune des quatre cartes. */
.pd-fiche .acr-sector-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.pd-fiche .acr-sector-head-txt{min-width:0}
.pd-fiche .acr-sector-ico{
	width:2.9rem;height:2.9rem;flex:0 0 auto;
	display:grid;place-items:center;
	border-radius:.85rem;font-size:1.15rem;
	color:var(--acc);background:rgba(var(--acc-rgb),.12);
}
.pd-fiche .acr-sector h3{font-size:1.1rem;font-weight:700;color:rgba(var(--primary-darkest-rgb),1);margin:0 0 .2rem}
.pd-fiche .acr-sector-sub{
	font-size:.73rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
	color:var(--acc);margin:0;
}
.pd-fiche .acr-sector-lead{font-size:.86rem;line-height:1.65;color:var(--text-secondary);margin-bottom:1rem}
.pd-fiche .acr-sector ul{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.45rem}
.pd-fiche .acr-sector li{display:flex;gap:.55rem;font-size:.82rem;line-height:1.55;color:var(--text-secondary)}
.pd-fiche .acr-sector li i{flex:0 0 auto;margin-top:.35rem;font-size:.6rem;color:var(--acc)}
.pd-fiche .acr-sector-foot{margin-top:auto}
/* Seul appel a l'action de la carte : 44px de haut minimum. */
.pd-fiche .acr-sector-link{
	display:inline-flex;align-items:center;min-height:44px;gap:.45rem;
	font-size:.87rem;font-weight:600;color:var(--acc);transition:gap .25s ease;
}
.pd-fiche .acr-sector-link:hover{gap:.8rem;color:var(--acc)}

/* Sous 768px la carte occupe toute la largeur : deux colonnes y seraient
   etriquees, l'en-tete repasse en pile centree. Le CORPS de la carte, lui,
   reste aligne a gauche : centrer une liste de puces la rend illisible. */
@media(max-width:767.98px){
	.pd-fiche .acr-sector-head{flex-direction:column;text-align:center;gap:.7rem}
	.pd-fiche .acr-sector-head .acr-sector-ico{margin-inline:auto}
}


/* ============================================================================
   5. PACKS - slider decale (composant .offset-* de theme.css)
   ============================================================================ */
.pd-fiche .offset-swiper-section{overflow:hidden;padding:4rem 0}
.pd-fiche .offset-swiper-editorial .of-sec-sep{margin:1rem 0 1.25rem}
.pd-fiche .offset-swiper-editorial .of-sec-lead{margin-bottom:1.5rem}
.pd-fiche .offset-slide-card:hover{border-color:rgba(var(--primary-medium-rgb),.4);box-shadow:0 12px 32px rgba(16,53,89,.12)}
.pd-fiche .offset-slide-card.is-popular{border-color:var(--pd-red-ink);box-shadow:0 12px 32px rgba(220,9,48,.12)}
/* Badge « Populaire » : 9,6px sur un voile rose. --pd-red-ink n'y donne que
   4,29:1, il faut descendre d'un cran. */
.pd-fiche .offset-slide-card .card-badge{background:rgba(220,9,48,.1);color:#A80624}
/* --text-muted vaut rgba(255,255,255,.8) et n'est PAS repris par l'ile claire
   (il sert encore aux vignettes sombres du hero) : ici il donnait du blanc sur
   une carte blanche. */
.pd-fiche .offset-slide-card .card-price-from{color:rgba(var(--primary-dark-rgb),.8)}
/* Le prix est peint en degrade-sur-texte : il faut annuler les DEUX proprietes
   (background-clip ET text-fill-color), sinon la couleur reste transparente. */
.pd-fiche .offset-slide-card .card-price{
	background:none;-webkit-background-clip:border-box;background-clip:border-box;
	-webkit-text-fill-color:rgba(var(--primary-medium-rgb),1);color:rgba(var(--primary-medium-rgb),1);
}
.pd-fiche .offset-slide-card.is-popular .card-price{background:none;-webkit-text-fill-color:var(--pd-red-ink);color:var(--pd-red-ink)}
.pd-fiche .offset-slide-card .card-price .currency{-webkit-text-fill-color:rgba(var(--primary-dark-rgb),.8);color:rgba(var(--primary-dark-rgb),.8)}
.pd-fiche .offset-slide-card .card-monthly strong{color:rgba(var(--primary-medium-rgb),1)}
.pd-fiche .offset-slide-card.is-popular .card-monthly strong{color:var(--pd-red-ink)}
.pd-fiche .offset-swiper-arrow:hover{border-color:rgba(var(--primary-medium-rgb),.6);color:rgba(var(--primary-medium-rgb),1);background:rgba(4,111,180,.08)}


/* ============================================================================
   6. BOUTIQUE - « Cle en main »
   ----------------------------------------------------------------------------
   Peau claire du slider produits : les tokens sont nommes une fois sur la
   section et lus par toutes les regles de la carte.
   ============================================================================ */
.pd-fiche .v5-shop{
	--shop-card-bg:#fff;
	--shop-card-border:var(--glass-border);
	--shop-title:rgba(var(--primary-darkest-rgb),1);
	--shop-text:rgba(var(--primary-dark-rgb),.8);
	--shop-muted:rgba(var(--primary-dark-rgb),.8);
	--shop-accent:rgba(var(--primary-medium-rgb),1);
	--shop-media-bg:#f4f7f9;
	--shop-chrome-bg:#fff;
	--shop-card-shadow:0 10px 30px rgba(4,23,43,.12);
	padding:4rem 0;position:relative;
}
.pd-fiche .v5-shop-head{margin-bottom:2.5rem}
.pd-fiche .shop-slider-wrap{position:relative}
/* Moins de produits que de places : Swiper aligne a gauche et laisse un vide
   franc a droite, qui se lit comme un bug. On centre la rangee.
   ⛔ La classe est posee par le JS sur le SEUL etat isLocked, jamais sur un
   comptage PHP : en mobile le slider defile pour de vrai et un
   justify-content:center fausserait le calcul de translation de Swiper. */
.pd-fiche .shop-slider-wrap.is-centered .swiper-wrapper{justify-content:center}
.pd-fiche .shop-slider{overflow:hidden;padding:.5rem 0 2.25rem}
.pd-fiche .shop-slider .swiper-slide{height:auto}
/* Fleches a l'EXTERIEUR du slider sur grand ecran, par-dessus les cartes des
   que la gouttiere ne suffit plus. */
.pd-fiche .shop-slider-wrap .swiper-button-prev,
.pd-fiche .shop-slider-wrap .swiper-button-next{
	width:46px;height:46px;margin-top:-40px;border-radius:50%;
	background:var(--shop-chrome-bg);border:1px solid var(--shop-card-border);
	color:var(--shop-accent);transition:all .25s ease;
	box-shadow:0 6px 18px rgba(16,53,89,.10);
}
.pd-fiche .shop-slider-wrap .swiper-button-prev{left:-58px}
.pd-fiche .shop-slider-wrap .swiper-button-next{right:-58px}
.pd-fiche .shop-slider-wrap .swiper-button-prev:hover,
.pd-fiche .shop-slider-wrap .swiper-button-next:hover{
	background:var(--shop-accent);border-color:var(--shop-accent);color:#fff;
	box-shadow:0 8px 25px rgba(16,53,89,.25);
}
.pd-fiche .shop-slider-wrap .swiper-button-prev:after,
.pd-fiche .shop-slider-wrap .swiper-button-next:after{font-size:1rem;font-weight:900}
.pd-fiche .shop-slider-wrap .swiper-button-disabled{opacity:.3}
.pd-fiche .shop-slider .swiper-pagination{bottom:0}
.pd-fiche .shop-slider .swiper-pagination-bullet{background:var(--shop-muted);opacity:.45;width:9px;height:9px}
.pd-fiche .shop-slider .swiper-pagination-bullet-active{background:var(--shop-accent)!important;opacity:1}
/* Carte produit volontairement pauvre en informations : le visuel, le nom et le
   prix suffisent a donner envie de cliquer ; le detail est le travail de la
   fiche produit. */
.pd-fiche .shop-card{
	position:relative;background:var(--shop-card-bg);
	border:1px solid var(--shop-card-border);border-radius:16px;
	overflow:hidden;height:100%;display:flex;flex-direction:column;
	transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}
.pd-fiche .shop-card:hover{border-color:var(--shop-accent);box-shadow:var(--shop-card-shadow);transform:translateY(-4px)}
.pd-fiche .shop-card-media{position:relative;aspect-ratio:1/1;background:var(--shop-media-bg);border-bottom:1px solid var(--shop-card-border)}
.pd-fiche .shop-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.pd-fiche .shop-card-badge{
	position:absolute;top:.75rem;left:.75rem;z-index:2;
	font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
	padding:.3rem .7rem;border-radius:50px;
	background:var(--pd-red-ink);color:#fff;box-shadow:0 4px 14px rgba(220,9,48,.35);
}
.pd-fiche .shop-card-body{padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;flex:1}
.pd-fiche .shop-card h3{font-size:.95rem;line-height:1.35;margin:0 0 .5rem}
.pd-fiche .shop-card h3 a{color:var(--shop-title);text-decoration:none}
/* Toute la carte est cliquable : la cible fait ~250x360px au lieu d'un lien de
   deux lignes. Le lien du titre reste le seul element focusable. */
.pd-fiche .shop-card h3 a::after{content:'';position:absolute;inset:0;z-index:3}
.pd-fiche .shop-card:hover h3 a{color:var(--shop-accent)}
.pd-fiche .shop-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.45rem;margin-top:auto}
.pd-fiche .shop-now{font-size:1.35rem;font-weight:800;color:var(--shop-accent);line-height:1}
/* Un prix sur demande est une PHRASE, pas un nombre : a 1,35rem il deborde de
   la carte. */
.pd-fiche .shop-now--devis{font-size:1rem}
.pd-fiche .shop-unit{font-size:.72rem;font-weight:500;color:var(--shop-muted)}
.pd-fiche .shop-old{font-size:.78rem;color:var(--shop-muted);text-decoration:line-through}
.pd-fiche .shop-more{margin-top:.6rem;font-size:.75rem;font-weight:600;color:var(--shop-text);transition:color .25s ease}
.pd-fiche .shop-more i{margin-left:.35rem;transition:transform .25s ease}
.pd-fiche .shop-card:hover .shop-more{color:var(--shop-accent)}
.pd-fiche .shop-card:hover .shop-more i{transform:translateX(4px)}
@media(max-width:1399.98px){
	.pd-fiche .shop-slider-wrap .swiper-button-prev{left:4px}
	.pd-fiche .shop-slider-wrap .swiper-button-next{right:4px}
}
@media(max-width:767.98px){
	.pd-fiche .v5-shop{padding:3rem 0}
	.pd-fiche .v5-shop-head{margin-bottom:2rem}
	.pd-fiche .shop-slider-wrap .swiper-button-prev,
	.pd-fiche .shop-slider-wrap .swiper-button-next{width:38px;height:38px}
	.pd-fiche .shop-slider-wrap .swiper-button-prev:after,
	.pd-fiche .shop-slider-wrap .swiper-button-next:after{font-size:.85rem}
}


/* ============================================================================
   7. AVIS CLIENTS
   ============================================================================ */

/* En-tete VOLONTAIREMENT different des autres sections : titre a gauche, note a
   droite. Toutes les autres ouvrent sur un bloc centre ; un enieme bloc centre,
   c'est la routine que la page doit justement casser. */
.pd-fiche .avis-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:2.25rem}
.pd-fiche .avis-head .of-sec-sep{margin:.9rem 0 0}
/* .of-trust vient de light.css (carte blanche : logo Google, etoiles, note).
   Sur la bande sombre il ne demande qu'une ombre portee un peu plus franche. */
.pd-fiche .avis-head .of-trust{margin-top:0;box-shadow:0 12px 34px rgba(2,9,23,.35)}

/* --- Le bandeau defilant -------------------------------------------------- */
/* Pleine largeur, hors .container. Choisi contre un 4e slider a fleches - la
   page en a deja trois (portfolio, packs, boutique). Ici : pas de fleches, pas
   de puces, pas de clic requis, une lecture qui passe toute seule. */
.pd-fiche .avis-marquee{
	position:relative;overflow:hidden;
	/* Fondu aux deux bords : dit « ca continue » sans ajouter un pixel de chrome. */
	-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
	mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.pd-fiche .avis-track{display:flex;width:max-content;animation:avisDefile 70s linear infinite}
/* display:contents : le clone n'existe que pour la boucle, ses cartes doivent
   rester des enfants directs du flex. */
.pd-fiche .avis-track-clone{display:contents}
/* La piste contient la liste DEUX fois : a -50% le second exemplaire est
   exactement la ou etait le premier, la boucle est invisible.
   ⛔ L'ecart entre cartes est une margin-right, PAS un gap de flex : avec un
   gap, la piste mesure 2N cartes + (2N-1) ecarts, donc -50% tombe une
   demi-gouttiere trop tot et la boucle saute a chaque tour. */
@keyframes avisDefile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pd-fiche .avis-marquee:hover .avis-track,
.pd-fiche .avis-marquee:focus-within .avis-track{animation-play-state:paused}
.pd-fiche .avis-card{
	flex:0 0 auto;width:330px;margin-right:1rem;
	display:flex;flex-direction:column;padding:1.35rem;border-radius:1rem;
	background:#fff;border:1px solid rgba(255,255,255,.14);
	box-shadow:0 10px 30px rgba(2,9,23,.22);
}
.pd-fiche .avis-stars{display:flex;gap:.15rem;margin-bottom:.7rem;font-size:.75rem;color:#f2a100}
/* ⛔ theme.css impose au <blockquote> global un fond en degrade, 28px de
   padding, un guillemet de 5,5rem en ::before et de l'italique. Dans une carte
   compacte ca fait un cadre dans un cadre et ca double la hauteur : on remet a
   plat et on ne garde que le lisere, qui suffit a dire « citation ». */
.pd-fiche .avis-card blockquote{
	margin:0 0 1.1rem;padding:0 0 0 .9rem;background:none;border-radius:0;
	border-left:3px solid rgba(var(--primary-medium-rgb),1);
	font-style:normal;font-size:.85rem;line-height:1.7;color:rgba(var(--primary-dark-rgb),.92);
}
.pd-fiche .avis-card blockquote::before{content:none}
/* Le clamp est porte par le <p> interne, que theme.css prevoit deja
   (blockquote p:last-child). */
.pd-fiche .avis-card blockquote p{margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pd-fiche .avis-who{display:flex;align-items:center;gap:.65rem;margin-top:auto}
/* Pastille d'initiales : acr_avis_initiales() existe deja dans php/avis.php,
   justement parce que les URL d'avatar Google expirent et cassent. */
.pd-fiche .avis-init{
	flex:0 0 auto;width:36px;height:36px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	font-size:.75rem;font-weight:700;color:#fff;
	background:linear-gradient(135deg,rgba(var(--primary-medium-rgb),1),var(--pd-red-ink));
}
.pd-fiche .avis-nom{font-size:.8rem;font-weight:600;color:rgba(var(--primary-darkest-rgb),1);line-height:1.3}
.pd-fiche .avis-ou{display:block;font-size:.72rem;font-weight:400;color:rgba(var(--primary-dark-rgb),.8)}

/* --- Invitation a deposer un avis ----------------------------------------- */
.pd-fiche .avis-invite{
	display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
	gap:.9rem 1.4rem;margin-top:2.5rem;text-align:center;
}
.pd-fiche .avis-invite p{margin:0;color:rgba(255,255,255,.82);font-size:.95rem}
/* Bouton BLANC : les regles de marque de Google interdisent de poser son logo
   en couleurs sur un aplat colore. Il tranche donc naturellement sur le navy. */
.pd-fiche .btn-google{
	display:inline-flex;align-items:center;gap:.6rem;
	padding:.6rem 1.15rem;border-radius:50px;
	background:#fff;border:1px solid rgba(255,255,255,.6);
	color:rgba(var(--primary-darkest-rgb),1);font-weight:700;font-size:.88rem;
	text-decoration:none;white-space:nowrap;
	box-shadow:0 10px 28px rgba(2,9,23,.3);
	transition:transform .25s ease,box-shadow .25s ease;
}
.pd-fiche .btn-google:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(2,9,23,.42);color:rgba(var(--primary-darkest-rgb),1)}
.pd-fiche .btn-google img{display:block;height:18px;width:auto}
.pd-fiche .btn-google i{font-size:.7rem;color:rgba(var(--primary-dark-rgb),.55)}

@media(max-width:767.98px){
	.pd-fiche .avis-head{margin-bottom:1.75rem}
	.pd-fiche .avis-card{width:280px}
	.pd-fiche .avis-track{animation-duration:50s}
	.pd-fiche .avis-invite{flex-direction:column;margin-top:2rem}
	.pd-fiche .avis-invite p{font-size:.88rem}
}


/* ============================================================================
   8. FAQ EN 1/3 + 2/3 (gabarit de la fiche produit du module SAV Pro)
   ============================================================================ */

/* La colonne etroite est un encart SOMBRE : c'est le rappel de couleur en fin
   de page, et il fait ressortir la pile de cartes blanches a cote. */
.pd-fiche .v5-faq-side{display:flex;flex-direction:column}
.pd-fiche .v5-faq-side .of-eyebrow{color:#ff8aa0}
.pd-fiche .v5-faq-side p{color:rgba(255,255,255,.82)}
.pd-fiche .v5-faq-side .pd-why li{border-bottom-color:rgba(255,255,255,.14);color:rgba(255,255,255,.86);font-size:.9rem}
.pd-fiche .v5-faq-side .pd-why i{color:#7fb2ea}
/* La colonne etroite ne s'etire PAS a la hauteur de l'accordeon (dix questions,
   soit ~900px) : ses deux boutons finiraient a un ecran et demi sous le texte
   qui les justifie. Elle se cale en haut et suit la lecture. */
@media(min-width:992px){
	.pd-fiche .v5-faq-col{align-self:flex-start;position:sticky;top:calc(var(--acro-nav-h) + 1.5rem)}
}
/* Les deux appels a l'action : UNE seule ligne en vue PC, centres en mobile.
   A l'echelle par defaut de .btn (.9rem de typo, 2rem de padding lateral) la
   paire reclame 377px pour 346 disponibles dans la carte : elle passait donc a
   la ligne. On resserre la typo et le padding ICI SEULEMENT - ailleurs dans la
   page les boutons gardent leur echelle de charte. */
.pd-fiche .v5-faq-side .v5-faq-actions{margin-top:auto;padding-top:1.5rem;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.pd-fiche .v5-faq-side .v5-faq-actions .btn{white-space:nowrap}
/* ⚠️ Le seuil est 1200 et pas 992, et c'est une mesure, pas un choix : la
   colonne fait 253px de contenu a 992px pour une paire qui en reclame 300 au
   minimum lisible. En dessous de 1200 les deux boutons repassent donc l'un
   sous l'autre, centres - comme en mobile.
   ⚠️ Le selecteur doit reprendre .v5-faq-side : la regle de base ci-dessus
   pese (0,3,0), une regle a (0,2,0) dans la media query serait ignoree
   (mesure faite : le flex-wrap:wrap gagnait a toutes les largeurs). */
@media(min-width:1200px){
	.pd-fiche .v5-faq-side .v5-faq-actions{flex-wrap:nowrap;justify-content:flex-start;gap:.45rem}
	.pd-fiche .v5-faq-side .v5-faq-actions .btn{padding-left:.8rem;padding-right:.8rem;font-size:.78rem}
	.pd-fiche .v5-faq-side .v5-faq-actions .btn i{margin-right:.35rem!important}
}
/* acr_faq() rend son propre <h2> « Questions frequentes ». Dans cette
   disposition c'est la colonne de gauche qui titre : on garde le <h2> pour la
   structure du document mais on le sort du flux visuel. */
.pd-fiche .v5-faq-list .acr-faq-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* ============================================================================
   9. PORTFOLIO ET APPEL FINAL
   ============================================================================ */

/* Bande sombre encadree de clair : les deux vagues portent donc la couleur de
   l'ile, pas celle du portfolio. */
.pd-fiche .of-portfolio{--v5-wave-color:var(--pd-bg)}
.pd-fiche .of-portfolio .of-pf-head{margin-bottom:2rem}
/* La carte du slider est un lien : pas de soulignement herite. */
.pd-fiche .portfolio-device-area{text-decoration:none}

.pd-fiche .v5-cta-sec{padding-bottom:4.5rem}


/* ============================================================================
   10. ACCESSIBILITE
   ============================================================================ */

/* Focus clavier visible : les liens de carte sont des liens a part entiere, ils
   doivent se voir a la tabulation. */
.pd-fiche .acr-sector-link:focus-visible,
.pd-fiche .btn-google:focus-visible{
	outline:2px solid var(--primary-fluo);
	outline-offset:3px;
}

/* Respect de la preference systeme, pour les EFFETS DE SURVOL uniquement.
   ⛔ Ne pas etendre cette regle au bandeau d'avis ni aux sliders : leur
   defilement EST la fonctionnalite, et le poste de l'utilisateur a « reduire
   les animations » actif - une garde de plus lui ferait voir un bug. */
@media(prefers-reduced-motion:reduce){
	.pd-fiche .acr-sector,
	.pd-fiche .acr-sector-link,
	.pd-fiche .shop-card,
	.pd-fiche .btn-google{transition:none}
	.pd-fiche .acr-sector:hover,
	.pd-fiche .shop-card:hover,
	.pd-fiche .btn-google:hover{transform:none}
}