/* ⚠️ PIEGE DU THEME HOTE (constate par GP le 20/09 sur le titre final) : sensible_pro
   fixe les interlignes des titres EN PIXELS (h2 { line-height:36px }). Tout titre de
   cette page qui clampe sa police au-dessus doit redeclarer SON line-height en valeur
   RELATIVE — sinon 40px de Fraunces se posent sur 36px d interligne et les deux lignes
   du titre se superposent. C est la regle generale du portage (PORTAGE_WORDPRESS.md) :
   le CSS scope regle les collisions de selecteurs, pas les proprietes que la maquette
   laisse au defaut du theme. */
/* Proposition de PAGE PRODUIT DoliPlusMobi pour erp-crm.fr — langage graphique de la
   vitrine produit (Fraunces + Open Sans, papier, bleu de France, argile en signal),
   PAS le registre nuit de nuage-web.fr : cette page vit dans le site DoliPlus.
   Une fois validee, elle part dans WordPress (5 langues) par le circuit habituel. */
.dp-mobi { --paper:#fff; --paper2:#F1F3F8; --ink:#302d2c; --soft:#474E59; --muted:#5C6572;
  --france:#0b4384; --francebr:#083465; --clay:#ff6900; --line:#DCE2EC; }
.dp-mobi * { box-sizing:border-box; margin:0; }
.dp-mobi { background:var(--paper); color:var(--ink); font-family:"Open Sans",ui-sans-serif,Arial,sans-serif; line-height:1.6; }
.dp-mobi .serif { font-family:"Fraunces",Georgia,serif; letter-spacing:-.015em; font-variant-ligatures:no-common-ligatures; }
.dp-mobi .wrap { max-width:1040px; margin:0 auto; padding-inline:20px; }
.dp-mobi a { color:var(--france); }
.dp-mobi .eyebrow { font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
/* hero */
/* ⚠️ PAS DE FOND BLEU (GP, 20/09, deux fois). Le hero etait peint en degrade — d'abord un
   bleu NUIT herite de la vitrine editeur, puis, premiere correction insuffisante, le bleu
   de France du menu. GP a tranche : AUCUN fond bleu. La raison se voit page a page — les
   autres pages du site ouvrent sur fond CLAIR, titre encre, eyebrow discret (mesure du
   20/09 sur /le-prix-de-doliplus/ : bandeau bleu du menu, puis le contenu sur papier).
   Le seul bleu de ces pages est celui du menu et du pied. Cette page suit la meme regle :
   le bleu de France reste une COULEUR DE TEXTE ET D'ACCENT, jamais un aplat de fond. */
.dp-mobi .hero { background:var(--paper2); color:var(--ink); overflow:hidden; }
.dp-mobi .hero .in { max-width:1040px; margin:0 auto; padding:64px 20px 0; display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:end; }
.dp-mobi .hero .eyebrow { color:var(--muted); margin-bottom:14px; }
.dp-mobi .hero h1 { font-size:clamp(34px,5.6vw,58px); line-height:1.05; margin-bottom:16px; text-wrap:balance; }
.dp-mobi .hero h1 em { font-style:italic; color:var(--france); }
.dp-mobi .hero p.chapo { color:var(--soft); font-size:clamp(16px,1.8vw,19px); max-width:46ch; margin-bottom:26px; }
.dp-mobi .hero p.chapo b { color:var(--ink); }
.dp-mobi .sign { display:flex; align-items:baseline; gap:12px; margin-bottom:30px; }
.dp-mobi .sign .z { font-family:"Fraunces",Georgia,serif; font-size:clamp(44px,6vw,72px); color:var(--clay); line-height:1; }
.dp-mobi .sign .t { font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); max-width:16ch; }
.dp-mobi .cta { display:inline-block; text-decoration:none; font-weight:700; border-radius:3px; padding:14px 26px; margin:0 10px 34px 0; }
.dp-mobi .cta.p { background:var(--france); color:#fff; }
.dp-mobi .cta.p:hover { background:var(--clay); color:#fff; }
/* ⚠️ Le bouton secondaire etait blanc sur blanc des que le hero est passe en fond clair :
   invisible. Il prend l'encre bleue, comme celui du bloc final (meme regle plus bas). */
.dp-mobi .cta.s { border:1.5px solid var(--france); color:var(--france); }
.dp-mobi .cta.s:hover { background:var(--france); color:#fff; }
.dp-mobi .hero img { display:block; width:100%; max-width:520px; border-radius:6px 6px 0 0; box-shadow:0 -18px 60px rgba(0,0,0,.45); }
@media (max-width:760px) {
  .dp-mobi .hero .in { grid-template-columns:1fr; }
  .dp-mobi .hero img { max-width:100%; }
}
/* bande incluse */
.dp-mobi .bande { background:var(--paper2); border-bottom:1px solid var(--line); }
.dp-mobi .bande .in { max-width:1040px; margin:0 auto; padding:16px 20px; display:flex; gap:26px; flex-wrap:wrap; font-size:15px; color:var(--soft); }
.dp-mobi .bande b { color:var(--ink); }
.dp-mobi .bande span::before { content:"✓"; color:var(--clay); font-weight:700; margin-right:8px; }
/* cas d'usage */
.dp-mobi .cas { padding-block:56px 30px; }
.dp-mobi .cas h2 { font-size:clamp(26px,3.6vw,38px); line-height:1.15; margin-bottom:8px; }
.dp-mobi .cas .sous { color:var(--soft); margin-bottom:34px; max-width:60ch; }
.dp-mobi .grille { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.dp-mobi .carte { border:1px solid var(--line); border-top:3px solid var(--france); padding:20px 20px 16px; display:flex; flex-direction:column; gap:8px; }
.dp-mobi .carte h3 { font-family:"Fraunces",Georgia,serif; font-size:19px; line-height:1.3; }
.dp-mobi .carte p { color:var(--soft); font-size:15px; flex:1; }
.dp-mobi .carte a { font-size:14px; font-weight:600; text-decoration:none; }
.dp-mobi .carte a:hover { color:var(--clay); }
/* comment */
/* ⚠️ `.dp-pose`, PAS `.comment` : la section s'appelait `comment` (« comment l'installer »)
   et ce nom entre en COLLISION GARANTIE dans WordPress — theme et plugins stylent les
   commentaires du blog sous des classes `comment*`. Vecu le 20/09 : les styles de
   `.comment-navigation` du theme (line-height:15px, italique) atterrissaient sur le titre
   « En place en deux minutes ». On ne combat pas une collision de nom, on la fuit :
   prefixe `dp-` comme partout ailleurs. Le renommage vaut AUSSI pour le post_content. */
.dp-mobi .dp-pose { background:var(--paper2); padding-block:52px; margin-top:40px; }
.dp-mobi .dp-pose h2 { font-size:clamp(24px,3.2vw,34px); line-height:1.2; margin-bottom:26px; }
.dp-mobi .pas { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:26px; }
.dp-mobi .pas .n { font-family:"Fraunces",Georgia,serif; font-size:34px; color:var(--clay); }
.dp-mobi .pas b { display:block; margin:6px 0 4px; }
.dp-mobi .pas p { color:var(--soft); font-size:15px; }
.dp-mobi .note-store { margin-top:26px; font-size:14px; color:var(--muted); border-left:3px solid var(--clay); padding-left:14px; max-width:70ch; }
/* final */
.dp-mobi .final { text-align:center; padding-block:60px 70px; }
.dp-mobi .final h2 { font-size:clamp(26px,3.6vw,40px); line-height:1.15; margin-bottom:10px; }
.dp-mobi .final p { color:var(--soft); margin-bottom:28px; }
.dp-mobi .final .cta.p { background:var(--france); color:#fff; }
.dp-mobi .final .cta.p:hover { background:var(--clay); }
.dp-mobi .final .cta.s { border-color:var(--france); color:var(--france); }
.dp-mobi .maq { max-width:1040px; margin:0 auto 40px; padding:14px 16px; border:1px dashed var(--line); color:var(--muted); font-size:13.5px; }