/* rodriguepoclet.fr — pilier Modules : catalogue /modules et pages des modules (docs/maquettes/modules/).
   Chargée après piliers.css, dont elle reprend les sections, les étapes, la FAQ et l'appel final. Même point de rupture
   (900 px) ; entre 900 et 1 440 px, titres en clamp(). */

/* =================== catalogue =================== */

/* ---------- héros ---------- */
.heros-catalogue { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; padding: 80px var(--marge) 64px; }
.heros-catalogue__titres { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.heros-catalogue__titre { font-size: clamp(44px, 4.45vw, 64px); line-height: 1.04; letter-spacing: -0.03em; }
.heros-catalogue__texte { color: var(--encre-douce); font-size: 19px; line-height: 1.6; }

/* ---------- cartes des modules ---------- */
.catalogue { display: flex; flex-direction: column; gap: 24px; padding: 0 var(--marge) 112px; }
.catalogue__vide { color: var(--gris); font-size: 18px; }
.carte-module { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); overflow: hidden; border-radius: 28px; background: var(--blanc); color: var(--encre); text-decoration: none; transition: transform .4s var(--courbe), box-shadow .4s; }
.carte-module:hover { color: var(--encre); }
.carte-module__visuel { display: flex; align-items: center; justify-content: center; padding: 56px 40px; background: var(--sable); }
.carte-module__icone { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border-radius: 24px; background: var(--blanc); color: var(--orange-texte); }
/* L'installation de l'accueil (installation.css), agrandie par zoom : ses tailles et positions sont en px et grandissent
   ensemble ; le curseur, placé depuis le bord droit, suit la largeur du cadre. Sans zoom, elle reste à sa taille. */
.carte-module__anime { width: 100%; max-width: 340px; height: 210px; overflow: hidden; border: 1px solid var(--trait-doux); border-radius: 14px; box-shadow: 0 28px 56px rgba(20, 27, 45, .14); zoom: 1.6; }
.carte-module__corps { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; padding: 56px 56px 56px 48px; }
.carte-module__nom { font-size: clamp(36px, 3.1vw, 44px); line-height: 1.05; letter-spacing: -0.025em; }
.carte-module__accroche { font: 600 23px/1.3 var(--police-texte); letter-spacing: -0.01em; }
.carte-module__description { color: var(--gris); font-size: 17px; line-height: 1.6; }
.carte-module__bouton { margin-top: 10px; min-height: 54px; padding: 0 26px; font-size: 16px; }

/* ---------- comment je conçois mes modules ---------- */
.conception__titre { margin-bottom: 48px; }
.conception .etape { background: var(--fond); }
/* « En production chez mes clients » suit la conception, blanche aussi : sable ici seulement (le partiel sert /developpement et /hebergement, qui restent blancs). */
.conception + #realisations { background: var(--sable); }
/* Les cartes y gardent leur fond (--fond) : le bandeau du visuel, sable par défaut, se confondrait avec la section et le haut de la carte disparaîtrait. Le bandeau « nuit » (articles) garde son fond sombre ; l'icône du bandeau sans image passe au sable pour rester visible. */
.conception + #realisations .carte-contenu__visuel:not(.carte-contenu__visuel--nuit) { background: var(--fond); }
.conception + #realisations .carte-contenu__icone { background: var(--sable); }

/* ---------- module sur mesure ---------- */
.sur-mesure { padding: 72px var(--marge) 0; }
.sur-mesure__bloc { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; padding: 64px 72px; border-radius: 28px; background: var(--sable); }
.sur-mesure__titre { font-size: clamp(34px, 3.1vw, 44px); line-height: 1.1; letter-spacing: -0.02em; }
.sur-mesure__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; color: var(--encre-douce); font-size: 19px; line-height: 1.6; }
.sur-mesure__texte .lien-souligne { font-size: 17px; }

/* =================== page d'un module =================== */

/* ---------- héros ---------- */
.heros-module { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding: 48px var(--marge) 104px; }
.heros-module--seul { grid-template-columns: minmax(0, 760px); }
.heros-module__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.fil-ariane { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--gris); font-size: 14px; }
.fil-ariane a { color: var(--gris); font-weight: 600; }
.fil-ariane a:hover { color: var(--encre); }
.heros-module__titres { display: flex; flex-direction: column; gap: 16px; }
.heros-module__nom { font-size: clamp(52px, 5.3vw, 76px); line-height: 1; letter-spacing: -0.035em; }
.heros-module__accroche { font: 600 clamp(24px, 2.1vw, 30px)/1.2 var(--police-texte); letter-spacing: -0.015em; }
.heros-module__description { color: var(--gris); font-size: 18px; line-height: 1.6; }
.heros-module__appel { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.heros-module__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.heros-module__actions .lien-souligne { font-size: 17px; }
.heros-module__compatibilite { display: inline-flex; align-items: center; gap: 8px; color: var(--gris); font-size: 15px; }
.heros-module__compatibilite svg, .tarif-module__notes svg { flex-shrink: 0; color: var(--orange-texte); }

/* ---------- preuve ---------- */
.preuve-module { padding-bottom: 64px; }
.preuve-module__grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.preuve-module__chiffre { color: var(--orange-clair); font: 700 clamp(160px, 16.7vw, 240px)/.9 var(--police-titre); letter-spacing: -0.05em; }
.preuve-module__texte { display: flex; flex-direction: column; gap: 20px; }
.preuve-module__titre { font-size: clamp(36px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -0.025em; }
.preuve-module__paragraphe { color: var(--sur-nuit-doux); font-size: 18px; line-height: 1.65; }
.preuve-module__nuance { font-size: 18px; line-height: 1.65; }
.preuve-module__lien { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; color: var(--orange-clair); font-size: 17px; font-weight: 600; text-decoration: none; }
.preuve-module__lien:hover { color: var(--sur-nuit); }
.preuve-module__source { margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(244, 245, 248, .12); color: #A9B1C2; font-size: 13px; line-height: 1.55; }

/* ---------- avis ---------- */
.avis-module { display: flex; justify-content: center; padding: 112px var(--marge); }
.avis-module__citation { max-width: 920px; display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.avis-module__guillemet { padding-top: 30px; color: var(--orange); font: 700 96px/.6 var(--police-titre); }
.avis-module__texte { font: 500 25px/1.5 var(--police-texte); letter-spacing: -0.01em; }
.avis-module__auteur { display: flex; flex-direction: column; gap: 4px; color: var(--gris); font-size: 15px; }
.avis-module__auteur strong { color: var(--encre); font-size: 18px; }

/* ---------- corps (Markdown découpé par App\Markdown\CorpsModule) ---------- */
.corps-module { padding: 24px var(--marge) 112px; background: var(--blanc); }
.corps-module__partie { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; align-items: start; padding: 80px 0; border-bottom: 1px solid var(--trait-doux); }
.corps-module__partie:last-child { padding-bottom: 0; border-bottom: 0; }
/* Le titre de la partie reste visible à gauche pendant la lecture (maquette du 30/09/2026). */
.corps-module__titre { position: sticky; top: calc(var(--hauteur-entete) + 32px); font-size: clamp(28px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -0.02em; }
.corps-module__contenu { grid-column: 2; display: flex; flex-direction: column; gap: 22px; color: var(--encre-douce); font-size: 18px; line-height: 1.7; }
.corps-module__contenu h3 { margin-top: 42px; color: var(--encre); font-size: 25px; line-height: 1.25; letter-spacing: -0.01em; }
.corps-module__contenu > h3:first-child { margin-top: 0; }
.corps-module__contenu strong { color: var(--encre); }
.corps-module__contenu a { font-weight: 600; }
.corps-module__contenu code { padding: .12em .4em; border-radius: 6px; background: #F0EEE8; font-family: var(--police-code); font-size: .86em; }
.corps-module__contenu > ul { display: flex; flex-direction: column; gap: 12px; list-style: none; }
.corps-module__contenu > ul > li { position: relative; padding-left: 34px; }
/* Coche des listes (prérequis), dessinée en CSS : deux traits orange. */
.corps-module__contenu > ul > li::before { content: ''; position: absolute; left: 3px; top: .5em; width: 13px; height: 7px; border-bottom: 2.6px solid var(--orange-texte); border-left: 2.6px solid var(--orange-texte); rotate: -45deg; }
.corps-module__contenu .ancre { margin-left: .35em; color: var(--gris); text-decoration: none; opacity: 0; transition: opacity .2s; }
.corps-module__contenu h3:hover .ancre, .corps-module__contenu .ancre:focus { opacity: 1; }
.capture { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.capture__cadre { overflow: hidden; border: 1px solid var(--trait-doux); border-radius: 14px; box-shadow: 0 20px 44px rgba(20, 27, 45, .1); }
.capture__cadre img { display: block; width: 100%; height: auto; }
.capture__legende { color: var(--gris); font-size: 14px; line-height: 1.5; }
.corps-module .faq__intitule { padding: 22px 0; font-size: 20px; }
.corps-module .faq__reponse { display: flex; flex-direction: column; gap: 14px; }

/* ---------- tarif ---------- */
.tarif-module__titre { margin-bottom: 40px; }
.tarif-module__carte { overflow: hidden; border-radius: 28px; background: var(--blanc); }
.tarif-module__corps { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; padding: 48px; }
.tarif-module__prix-bloc { display: flex; flex-direction: column; gap: 20px; }
.tarif-module__prix { display: flex; align-items: baseline; gap: 12px; font: 700 clamp(64px, 5.8vw, 84px)/1 var(--police-titre); letter-spacing: -0.035em; }
.tarif-module__prix span { color: var(--gris); font: 600 20px/1 var(--police-texte); letter-spacing: 0; }
.tarif-module__detail { color: var(--encre-douce); font-size: 18px; line-height: 1.65; }
.tarif-module__achat { display: flex; flex-direction: column; gap: 8px; }
.tarif-module__demo { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; font-size: 16px; font-weight: 600; }
.tarif-module__notes { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--trait-doux); color: var(--gris); font-size: 15px; line-height: 1.5; list-style: none; }
.tarif-module__notes li { display: flex; gap: 10px; }
.tarif-module__notes svg { margin-top: 2px; }
.tarif-module__bandeau { padding: 24px 48px; background: var(--nuit); color: var(--sur-nuit); font-size: 18px; line-height: 1.5; }
.tarif-module__bandeau a { color: var(--orange-clair); }
.tarif-module__bandeau a:hover { color: var(--sur-nuit); }
.tarif-module__bandeau :focus-visible { outline-color: var(--orange); }

/* ---------- héros : visite animée (templates/partials/visuel-visite.php) ---------- */
/* La scène est dessinée sur la grille de la maquette, 568 × 400 : --u vaut un pixel de cette grille à l'échelle de la
   fenêtre (unités de conteneur). Chaque élément .visite__etape--N appartient à l'étape N (1 accueil, 2 catégorie,
   3 fiche produit, 4 panier) : sans animation, seule l'étape 3 est visible. */
.visite { display: flex; flex-direction: column; gap: 14px; }
.visite__navigateur { overflow: hidden; border: 1px solid var(--trait-doux); border-radius: 18px; background: var(--blanc); box-shadow: 0 32px 64px rgba(20, 27, 45, .18); }
.visite__adresses, .visite__temps { display: grid; }
.visite__adresses > span, .visite__temps > span { grid-area: 1 / 1; }
.visite__cadre { aspect-ratio: 568 / 400; container-type: inline-size; }
.visite__scene { --u: calc(100cqw / 568); position: relative; height: 100%; overflow: hidden; background: var(--blanc); color: var(--encre); font-size: calc(14 * var(--u)); line-height: 1.2; }
.visite__etape { opacity: 0; }
.visite__etape--3 { opacity: 1; }
.visite__entete { height: calc(46 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(18 * var(--u)); border-bottom: 1px solid #EFEDE7; }
.visite__marque { font: 700 calc(17 * var(--u))/1 var(--police-titre); }
.visite__menu { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.visite__menu > span:not(.visite__panier) { width: calc(46 * var(--u)); height: calc(7 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--gris); }
.visite__menu > span:nth-child(2) { width: calc(38 * var(--u)); }
.visite__menu > span:nth-child(3) { width: calc(52 * var(--u)); }
.visite__panier { position: relative; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: var(--orange); }
.visite__panier > span { position: absolute; top: calc(-5 * var(--u)); right: calc(-6 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--nuit); color: var(--sur-nuit); font-size: calc(10 * var(--u)); font-weight: 700; }
.visite__page { position: absolute; inset: calc(46 * var(--u)) 0 0; padding: calc(14 * var(--u)); }
.visite__titre-page { display: flex; align-items: center; justify-content: space-between; min-height: calc(26 * var(--u)); font: 700 calc(18 * var(--u))/1.2 var(--police-titre); }
.visite__photo { display: block; height: calc(92 * var(--u)); border-radius: calc(8 * var(--u)); background: #DDE7F3; }
.visite__photo--peche { background: #FFE2BF; }
.visite__photo--vert { background: #E4EFD9; }
.visite__produits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(12 * var(--u)); }
.visite__produit { display: flex; flex-direction: column; gap: calc(7 * var(--u)); }
.visite__produit > span:not(.visite__photo) { height: calc(8 * var(--u)); border-radius: calc(4 * var(--u)); }
.visite__produit > span:nth-child(2) { width: 72%; background: var(--encre); }
.visite__produit > span:nth-child(3) { width: 36%; background: var(--orange-texte); }
/* accueil */
.visite__accueil { display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.visite__banniere { height: calc(118 * var(--u)); flex-shrink: 0; display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(22 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--nuit); }
.visite__banniere > span { height: calc(12 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--sur-nuit); }
.visite__banniere > span:nth-child(1) { width: 58%; }
.visite__banniere > span:nth-child(2) { width: 38%; }
.visite__banniere > span:nth-child(3) { width: calc(92 * var(--u)); height: calc(24 * var(--u)); margin-top: auto; border-radius: calc(12 * var(--u)); background: var(--orange); }
/* catégorie */
.visite__categorie { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.visite__filtres { display: flex; gap: calc(6 * var(--u)); }
.visite__filtres > span { width: calc(54 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(10 * var(--u)); background: #EFEDE7; }
.visite__filtres > span + span { width: calc(40 * var(--u)); }
.visite__produits--grille { row-gap: calc(14 * var(--u)); }
.visite__produits--grille .visite__photo { height: calc(78 * var(--u)); }
/* fiche produit */
.visite__fiche { display: grid; grid-template-columns: calc(250 * var(--u)) minmax(0, 1fr); align-items: start; gap: calc(20 * var(--u)); }
.visite__photo--grande { height: calc(240 * var(--u)); border-radius: calc(10 * var(--u)); }
.visite__infos { display: flex; flex-direction: column; align-items: flex-start; gap: calc(10 * var(--u)); padding-top: calc(6 * var(--u)); }
.visite__infos .visite__titre-page { min-height: 0; font-size: calc(20 * var(--u)); }
.visite__infos > span:nth-child(2), .visite__infos > span:nth-child(3) { width: 60%; height: calc(8 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--trait); }
.visite__infos > span:nth-child(3) { width: 42%; }
.visite__prix { width: calc(88 * var(--u)); height: calc(14 * var(--u)); margin-top: calc(8 * var(--u)); border-radius: calc(7 * var(--u)); background: var(--orange-texte); }
.visite__bouton { display: flex; align-items: center; height: calc(44 * var(--u)); padding: 0 calc(20 * var(--u)); border-radius: calc(22 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 700; white-space: nowrap; }
.visite__bouton--orange { margin-top: calc(10 * var(--u)); background: var(--orange); color: var(--nuit); }
.visite__bouton--sombre { background: var(--nuit); color: var(--sur-nuit); }
/* panier */
.visite__commande { display: flex; flex-direction: column; align-items: flex-start; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(18 * var(--u)); }
.visite__ligne { width: calc(270 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--fond); }
.visite__ligne .visite__photo { width: calc(52 * var(--u)); height: calc(52 * var(--u)); flex-shrink: 0; }
.visite__ligne > span:last-child { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.visite__ligne > span:last-child > span { width: calc(120 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--encre); }
.visite__ligne > span:last-child > span + span { width: calc(64 * var(--u)); background: var(--orange-texte); }
.visite__total { width: calc(270 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(4 * var(--u)); font-weight: 600; }
.visite__total > span + span { width: calc(64 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--encre); }
/* pastille de l'inspecteur */
.visite__pastille { position: absolute; right: calc(16 * var(--u)); bottom: calc(16 * var(--u)); width: calc(240 * var(--u)); overflow: hidden; border: 1px solid var(--trait-doux); border-radius: calc(14 * var(--u)); background: var(--blanc); box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(20, 27, 45, .18); }
.visite__pastille--direct { opacity: 0; }
.visite__inspecteur { height: calc(30 * var(--u)); display: flex; align-items: center; gap: calc(6 * var(--u)); padding: 0 calc(12 * var(--u)); border-bottom: 1px solid #EFEDE7; color: var(--gris); font-size: calc(11.5 * var(--u)); font-weight: 600; }
.visite__inspecteur svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); color: var(--orange); }
.visite__releve { display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)); background: #E9F5EE; }
.visite__pastille--direct .visite__releve { background: #EEF1F6; }
.visite__etat { display: flex; align-items: center; gap: calc(7 * var(--u)); color: #1F6B3A; font-size: calc(14 * var(--u)); font-weight: 700; }
.visite__pastille--direct .visite__etat { color: #3A4256; }
.visite__point { width: calc(9 * var(--u)); height: calc(9 * var(--u)); flex-shrink: 0; border-radius: 50%; background: #2E9E5B; }
.visite__pastille--direct .visite__point { background: var(--gris); }
.visite__mesure { display: flex; align-items: baseline; gap: calc(8 * var(--u)); }
.visite__temps { font: 700 calc(30 * var(--u))/1 var(--police-titre); }
.visite__unite { color: var(--gris); font-size: calc(12 * var(--u)); }
.visite__note { color: var(--encre-douce); font-size: calc(12.5 * var(--u)); line-height: 1.45; }
/* curseur : translate place sa pointe (3, 1,5 dans son dessin de 22) sur la cible */
.visite__curseur { position: absolute; top: 0; left: 0; width: calc(22 * var(--u)); height: calc(22 * var(--u)); opacity: 0; pointer-events: none; translate: calc(362 * var(--u)) calc(198 * var(--u)); }
.visite__curseur svg { display: block; width: 100%; height: 100%; transform-origin: 14% 7%; }
.visite__legende { color: var(--gris); font-size: 14px; line-height: 1.5; text-align: center; }

/* Étapes de 3 s sur 12 : chaque page s'affiche d'un coup (25 % par étape), la pastille monte en 0,3 s (2,5 %), le curseur
   attend 0,9 s (7,5 %), se déplace en 0,9 s et clique entre 2,35 et 2,6 s (19,6 à 21,7 % de chaque quart). */
@keyframes visite-etape-1 { 0%, 24.9% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes visite-etape-2 { 0%, 24.9% { opacity: 0; } 25%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes visite-etape-3 { 0%, 49.9% { opacity: 0; } 50%, 74.9% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes visite-etape-4 { 0%, 74.9% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes visite-pastille-cache {
  0%, .1% { opacity: 0; translate: 0 calc(8 * var(--u)); }
  2.5%, 24.9% { opacity: 1; translate: none; }
  25% { opacity: 0; translate: 0 calc(8 * var(--u)); }
  27.5%, 49.9% { opacity: 1; translate: none; }
  50% { opacity: 0; translate: 0 calc(8 * var(--u)); }
  52.5%, 74.9% { opacity: 1; translate: none; }
  75%, 100% { opacity: 0; translate: 0 calc(8 * var(--u)); }
}
@keyframes visite-pastille-direct { 0%, 75% { opacity: 0; translate: 0 calc(8 * var(--u)); } 77.5%, 100% { opacity: 1; translate: none; } }
@keyframes visite-curseur {
  0%, 7.5% { translate: calc(80 * var(--u)) calc(234 * var(--u)); }
  15%, 32.5% { translate: calc(280 * var(--u)) calc(236 * var(--u)); }
  40%, 57.5% { translate: calc(463 * var(--u)) calc(135 * var(--u)); }
  65%, 82.5% { translate: calc(362 * var(--u)) calc(198 * var(--u)); }
  90%, 100% { translate: calc(80 * var(--u)) calc(234 * var(--u)); }
}
@keyframes visite-clic {
  0%, 19.5%, 21.8%, 44.5%, 46.8%, 69.5%, 71.8%, 100% { scale: 1; }
  19.6%, 21.7%, 44.6%, 46.7%, 69.6%, 71.7% { scale: .82; }
}

@media (min-width: 900px) and (max-width: 1279px) {
  .carte-module__visuel { padding: 40px 32px; }
  .carte-module__anime { zoom: 1.3; }
  .carte-module__corps { padding: 44px 40px; }
  .sur-mesure__bloc { gap: 40px; padding: 56px; }
}
/* Colonne étroite (jusqu'à environ 1 010 px) : à 1,3 la ligne « Cache de pages PrestaShop » est coupée ; à 1,1 elle tient. */
@media (min-width: 900px) and (max-width: 1009px) {
  .carte-module__anime { zoom: 1.1; }
}

@media (max-width: 899px) {
  .heros-catalogue { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 36px 20px 32px; }
  .heros-catalogue__titres { gap: 20px; }
  .heros-catalogue .surtitre { gap: 10px; font-size: 12px; }
  .heros-catalogue__titre { font-size: 38px; line-height: 1.08; }
  .heros-catalogue__texte { font-size: 17px; line-height: 1.55; }
  .catalogue { padding: 0 20px 56px; }
  .carte-module { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
  .carte-module__visuel { padding: 16px; }
  .carte-module__anime { max-width: none; box-shadow: none; zoom: 1; }
  .carte-module__corps { gap: 12px; padding: 24px 22px 26px; }
  .carte-module__nom { font-size: 30px; }
  .carte-module__accroche { font-size: 19px; }
  .carte-module__description { font-size: 15px; }
  .carte-module__bouton { align-self: stretch; min-height: 52px; margin-top: 6px; }
  .conception__titre { margin-bottom: 24px; }
  .sur-mesure { padding: 40px 20px 0; }
  .sur-mesure__bloc { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 28px 22px; border-radius: 22px; }
  .sur-mesure__titre { font-size: 28px; line-height: 1.12; }
  .sur-mesure__texte { gap: 6px; font-size: 16px; }
  .sur-mesure__texte .lien-souligne { font-size: 16px; }
  .heros-module { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 24px 20px 48px; }
  .heros-module__texte { gap: 20px; }
  .heros-module .surtitre { gap: 10px; font-size: 12px; }
  .fil-ariane a { display: inline-flex; align-items: center; min-height: 44px; }
  .heros-module__nom { font-size: 48px; }
  .heros-module__accroche { font-size: 22px; line-height: 1.25; }
  .heros-module__description { font-size: 16px; }
  .heros-module__appel { align-self: stretch; align-items: stretch; gap: 6px; }
  .heros-module__actions { flex-direction: column; align-items: stretch; gap: 6px; }
  .heros-module__actions .bouton { min-height: 56px; }
  .heros-module__actions .lien-souligne { align-self: center; min-height: 48px; font-size: 16px; }
  .heros-module__compatibilite { align-self: center; font-size: 14px; }
  .preuve-module { padding-bottom: 56px; }
  .preuve-module__grille { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .preuve-module__chiffre { font-size: 120px; }
  .preuve-module__texte { gap: 18px; }
  .preuve-module__titre { font-size: 32px; line-height: 1.1; }
  .preuve-module__paragraphe, .preuve-module__nuance { font-size: 16px; line-height: 1.6; }
  .preuve-module__source { margin-top: 24px; padding-top: 18px; font-size: 12px; }
  .avis-module { justify-content: flex-start; padding: 56px 20px; }
  .avis-module__citation { align-items: flex-start; gap: 18px; text-align: left; }
  .avis-module__guillemet { padding-top: 22px; font-size: 72px; }
  .avis-module__texte { font-size: 19px; }
  .avis-module__auteur { gap: 2px; font-size: 14px; }
  .avis-module__auteur strong { font-size: 16px; }
  .corps-module { padding: 8px 20px 56px; }
  .corps-module__partie { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 44px 0; }
  .corps-module__titre { position: static; font-size: 28px; }
  .corps-module__contenu { grid-column: auto; gap: 18px; font-size: 16px; }
  .corps-module__contenu h3 { margin-top: 22px; font-size: 20px; }
  .corps-module__contenu > ul > li { padding-left: 30px; }
  .capture { gap: 10px; }
  .capture__cadre { border-radius: 10px; box-shadow: none; }
  .capture__legende { font-size: 13px; }
  .corps-module .faq__intitule { padding: 18px 0; font-size: 18px; }
  .corps-module .faq__reponse { padding: 0 0 20px; font-size: 15px; }
  .tarif-module__titre { margin-bottom: 24px; }
  .tarif-module__carte { border-radius: 22px; }
  .tarif-module__corps { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 26px 22px; }
  .tarif-module__prix { font-size: 56px; }
  .tarif-module__prix span { font-size: 17px; }
  .tarif-module__detail { font-size: 16px; line-height: 1.6; }
  .tarif-module__achat .bouton { min-height: 56px; }
  .tarif-module__demo { min-height: 44px; }
  .tarif-module__notes { font-size: 14px; }
  .tarif-module__bandeau { padding: 20px 22px; font-size: 16px; }
  .visite { gap: 10px; }
  .visite__navigateur { border-radius: 12px; }
  .visite__legende { font-size: 13px; }
}

@media (prefers-reduced-motion: no-preference) {
  .heros-catalogue > * { animation: apparition .9s var(--courbe) both; }
  .heros-catalogue > :nth-child(2) { animation-delay: .1s; }
  .heros-catalogue .pastille { animation: pouls 2s ease-out infinite; }
  .carte-module:hover { transform: translateY(-6px); box-shadow: 0 28px 56px rgba(20, 27, 45, .12); }
  /* Pointeur sur la carte ou focus dessus : l'installation se fige, comme sur les cartes de l'accueil. */
  .carte-module:hover .carte-module__anime *,
  .carte-module:hover .carte-module__anime *::before,
  .carte-module:hover .carte-module__anime *::after,
  .carte-module:focus-visible .carte-module__anime *,
  .carte-module:focus-visible .carte-module__anime *::before,
  .carte-module:focus-visible .carte-module__anime *::after { animation-play-state: paused; }
  .heros-module__texte > * { animation: apparition .9s var(--courbe) both; }
  .heros-module__texte > :nth-child(2) { animation-delay: .08s; }
  .heros-module__texte > :nth-child(3) { animation-delay: .16s; }
  .heros-module__texte > :nth-child(4) { animation-delay: .24s; }
  .heros-module__texte > :nth-child(5) { animation-delay: .32s; }
  .heros-module .pastille { animation: pouls 2s ease-out infinite; }
  .visite__etape--1 { animation: visite-etape-1 12s infinite; }
  .visite__etape--2 { animation: visite-etape-2 12s infinite; }
  .visite__etape--3 { animation: visite-etape-3 12s infinite; }
  .visite__etape--4 { animation: visite-etape-4 12s infinite; }
  .visite__pastille--cache { animation: visite-pastille-cache 12s infinite; }
  .visite__pastille--direct { animation: visite-pastille-direct 12s infinite; }
  .visite__curseur { opacity: 1; animation: visite-curseur 12s cubic-bezier(.45, 0, .2, 1) infinite; }
  .visite__curseur svg { animation: visite-clic 12s infinite; }
  /* Pointeur sur la visite : elle se fige, comme les visuels des cartes. */
  .visite:hover *, .visite:hover *::before, .visite:hover *::after { animation-play-state: paused; }
}