/** Shopify CDN: Minification failed

Line 12:0 Unexpected "<"
Line 193:0 Unexpected "<"
Line 206:130 Unterminated string token
Line 217:105 Unterminated string token
Line 218:117 Unterminated string token
Line 223:137 Unterminated string token
Line 226:82 Unterminated string token

**/
<!doctype html><html lang="fr"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Apercu encarts Aeraly - DA noire</title>
<style>body{font-family:'Instrument Sans','Helvetica Neue',Arial,sans-serif;background:#fff;color:#1A1A1A;margin:0;padding:32px 16px;}.wrap{max-width:760px;margin:0 auto;}.wrap>p{line-height:1.7;}h2{font-weight:700;}
/* =========================================
   ENCARTS AERALY  -  v9 (DA noire, orange secondaire)
   A coller en REMPLACEMENT TOTAL du contenu de aeraly-encarts.css.
   Memes noms de classes : rien a changer dans les articles.

   Parti pris : cartes noires a plat, texte clair, accents orange.
   Pas de degrade, pas d'ombre lourde. Les tableaux gardent une entete
   noire mais un corps clair (lisibilite). Tableaux qui tiennent sur mobile.
   ========================================= */

:root {
  --a-noir: #141414;         /* fond des cartes */
  --a-noir-2: #1E1E1E;       /* cartes imbriquees (comparatif) */
  --a-line-d: #2F2F2F;       /* filets sur fond noir */
  --a-clair: #F1EDE9;        /* texte sur fond noir */
  --a-muted: rgba(241,237,233,0.70);
  --a-accent: #B7784F;       /* orange : boutons, puces, filets */
  --a-orange: #D19871;       /* orange clair : labels/liens sur noir */
  --a-ink: #1A1A1A;          /* texte sur fond clair (tableaux) */
  --a-soft: #F7F3EF;         /* fond clair (corps de tableau, entete claire) */
  --a-line: #E6DDD4;         /* filets sur fond clair */
  --a-r: 8px;
}

/* Gras vraiment gras */
.rte strong, article strong, .tldr-box strong, .def-box strong, .info-box strong,
.key-takeaway strong, .dos-donts strong, .quote-box strong, .stat-callout strong,
.cta-box strong, .visual-cta strong, .comparison-cards strong { font-weight: 700 !important; }

/* Carte noire commune */
.tldr-box, .def-box, .info-box, .key-takeaway, .quote-box,
.article-toc, .encart-conseil, .encart-checklist, .encart-repere,
.stat-callout, .dos-donts {
  background: var(--a-noir) !important;
  border: 1px solid var(--a-line-d) !important;
  border-radius: var(--a-r) !important;
  padding: 18px 22px !important;
  margin: 24px 0 !important;
}
/* Texte clair dans toutes les cartes noires */
.tldr-box, .tldr-box li, .tldr-box p,
.def-box, .def-box p,
.info-box, .info-box p,
.key-takeaway, .key-takeaway p,
.quote-box, .quote-box p,
.dos-donts, .dos-donts li,
.encart-conseil, .encart-conseil p,
.encart-checklist, .encart-checklist li,
.encart-repere, .encart-repere p,
.stat-callout, .stat-callout p { color: var(--a-clair) !important; }

.tldr-box p, .def-box p, .info-box p, .key-takeaway p, .quote-box p,
.encart-conseil p, .encart-repere p { margin: 0 0 8px !important; line-height: 1.6 !important; }
.tldr-box p:last-child, .def-box p:last-child, .info-box p:last-child,
.key-takeaway p:last-child, .quote-box p:last-child { margin-bottom: 0 !important; }

/* Labels et accents en orange clair */
.tldr-box > p:first-child, .info-box > strong:first-child, .key-takeaway > strong:first-child { margin-bottom: 8px !important; }
.info-box > strong:first-child, .key-takeaway > strong:first-child { display: block !important; }
.tldr-box > p:first-child strong, .info-box > strong:first-child, .key-takeaway > strong:first-child,
.def-box p strong:first-child, .encart-conseil .label, .encart-checklist .label {
  color: var(--a-orange) !important;
}
.encart-conseil .label, .encart-checklist .label { display: block !important; margin-bottom: 8px !important; font-weight: 700 !important; }
.tldr-box a, .def-box a, .info-box a, .key-takeaway a, .quote-box a,
.dos-donts a, .stat-callout a, .encart-conseil a, .encart-checklist a, .encart-repere a {
  color: var(--a-orange) !important; text-decoration: underline !important; text-underline-offset: 2px !important;
}

/* Liste du TL;DR : puces oranges */
.tldr-box ul { margin: 8px 0 0 !important; padding-left: 20px !important; list-style: disc !important; }
.tldr-box li { margin: 0 0 6px !important; line-height: 1.55 !important; }
.tldr-box li::marker { color: var(--a-accent) !important; }

/* Checklist : coche orange nette, retrait constant */
.encart-checklist ul { list-style: none !important; margin: 8px 0 0 !important; padding: 0 !important; }
.encart-checklist li { position: relative !important; margin: 0 !important; padding: 0 0 10px 28px !important; line-height: 1.55 !important; }
.encart-checklist li:last-child { padding-bottom: 0 !important; }
.encart-checklist li::marker { content: "" !important; }
.encart-checklist li::before {
  content: "" !important; position: absolute !important; left: 2px !important; top: 0.4em !important;
  width: 10px !important; height: 6px !important; border: none !important;
  border-left: 2.5px solid var(--a-accent) !important; border-bottom: 2.5px solid var(--a-accent) !important;
  border-radius: 0 !important; transform: rotate(-45deg) !important; background: none !important;
}

/* Citation */
.quote-box p { font-style: italic !important; }
.quote-box cite { display: block !important; margin-top: 8px !important; font-style: normal !important; font-weight: 700 !important; font-size: 0.9em !important; color: var(--a-orange) !important; }

/* Chiffre clef / stat */
.encart-repere .chiffre { display: block !important; font-size: 1.7em !important; font-weight: 700 !important; color: var(--a-orange) !important; margin-bottom: 4px !important; }
.stat-callout { text-align: center !important; }
.stat-callout p { margin: 0 !important; line-height: 1.6 !important; }
.stat-callout strong { color: var(--a-orange) !important; font-size: 1.6em !important; }

/* A faire / a eviter */
.dos-donts { padding: 6px 22px !important; }
.dos-donts ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.dos-donts li { padding: 12px 0 !important; border-bottom: 1px solid var(--a-line-d) !important; line-height: 1.55 !important; }
.dos-donts li:last-child { border-bottom: none !important; }
.dos-donts li strong:first-child { color: var(--a-orange) !important; }

/* Cartes comparatives (noires, un ton plus clair) */
.comparison-cards { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 14px !important; margin: 24px 0 !important; }
.comparison-cards > .card { background: var(--a-noir-2) !important; border: 1px solid var(--a-line-d) !important; border-radius: var(--a-r) !important; padding: 18px !important; color: var(--a-clair) !important; }
.comparison-cards > .card > strong { display: block !important; color: var(--a-orange) !important; margin-bottom: 8px !important; padding-bottom: 8px !important; border-bottom: 1px solid var(--a-line-d) !important; }
.comparison-cards > .card p { margin: 0 !important; line-height: 1.55 !important; font-size: 0.95em !important; color: var(--a-clair) !important; }

/* Sommaire */
.article-toc summary { cursor: pointer !important; font-weight: 700 !important; color: var(--a-orange) !important; }
.article-toc ul { margin: 12px 0 0 !important; padding-left: 20px !important; }
.article-toc li { margin: 4px 0 !important; }
.article-toc li::marker { color: var(--a-accent) !important; }
.article-toc a { color: var(--a-clair) !important; text-decoration: none !important; }
.article-toc a:hover { color: var(--a-orange) !important; text-decoration: underline !important; }

/* Appel a l'action (deja noir, bouton orange) */
.visual-cta, .cta-box { background: var(--a-noir) !important; color: var(--a-clair) !important; border: 1px solid var(--a-line-d) !important; border-radius: var(--a-r) !important; padding: 24px 28px !important; margin: 32px 0 !important; }
.visual-cta { display: flex !important; align-items: center !important; gap: 24px !important; }
.visual-cta .content { flex: 1 1 auto !important; min-width: 0 !important; }
.visual-cta strong, .cta-box > strong { display: block !important; font-size: 1.2em !important; margin-bottom: 8px !important; color: #fff !important; }
.visual-cta p, .cta-box p { margin: 0 0 12px !important; line-height: 1.6 !important; color: var(--a-muted) !important; }
.visual-cta .visual-cta-button, .cta-button { display: inline-block !important; background: var(--a-accent) !important; color: #141414 !important; padding: 12px 22px !important; border-radius: 6px !important; font-weight: 700 !important; text-decoration: none !important; }
.visual-cta .visual-cta-button:hover, .cta-button:hover { opacity: 0.9 !important; color: #141414 !important; text-decoration: none !important; }
.visual-cta .visual-cta-image { flex: 0 0 120px !important; width: 120px !important; max-width: 120px !important; height: auto !important; opacity: 0.9 !important; }
.visual-cta.image-right { flex-direction: row !important; }
.visual-cta.image-left { flex-direction: row-reverse !important; }

/* Bloc auteur (carte noire) */
.author-box { display: flex !important; align-items: center !important; gap: 16px !important; background: var(--a-noir) !important; border: 1px solid var(--a-line-d) !important; border-radius: var(--a-r) !important; padding: 18px 22px !important; margin: 40px 0 20px !important; }
.author-box img { flex: 0 0 60px !important; width: 60px !important; height: 60px !important; border-radius: 50% !important; object-fit: cover !important; }
.author-content strong { display: block !important; color: var(--a-orange) !important; }
.author-content p { margin: 4px 0 0 !important; line-height: 1.5 !important; font-size: 0.95em !important; color: var(--a-clair) !important; }
.author-content .author-date { color: var(--a-muted) !important; font-size: 0.85em !important; }
.author-content a { color: var(--a-orange) !important; }

/* FAQ en clair (texte sur la page blanche, titres nets + filet) */
.faq-plain h3 { margin: 22px 0 6px !important; padding-top: 16px !important; border-top: 1px solid var(--a-line) !important; color: var(--a-ink) !important; }
.faq-plain h3:first-of-type { border-top: none !important; padding-top: 0 !important; }
.faq-plain p { margin: 0 !important; line-height: 1.7 !important; }

/* FAQ accordeon (anciens articles) : carte noire */
.faq-accordion details { background: var(--a-noir) !important; border: 1px solid var(--a-line-d) !important; border-radius: var(--a-r) !important; margin: 0 0 10px !important; overflow: hidden !important; }
.faq-accordion summary { cursor: pointer !important; font-weight: 700 !important; color: var(--a-clair) !important; padding: 14px 18px !important; list-style: none !important; }
.faq-accordion summary::-webkit-details-marker { display: none !important; }
.faq-accordion details p { margin: 0 !important; padding: 0 18px 16px !important; line-height: 1.7 !important; color: var(--a-clair) !important; }

/* Tableaux : entete noire, corps clair (lisibilite), filets fins */
.table-wrapper { overflow-x: auto !important; margin: 24px 0 !important; border: 1px solid var(--a-line) !important; border-radius: var(--a-r) !important; }
.table-wrapper table { width: 100% !important; border-collapse: collapse !important; margin: 0 !important; font-size: 0.95em !important; background: #fff !important; }
.table-wrapper th { background: var(--a-noir) !important; color: var(--a-clair) !important; text-align: left !important; font-weight: 700 !important; padding: 12px 14px !important; border-bottom: 2px solid var(--a-accent) !important; }
.table-wrapper td { padding: 11px 14px !important; border-bottom: 1px solid var(--a-line) !important; vertical-align: top !important; line-height: 1.5 !important; color: var(--a-ink) !important; }
.table-wrapper tr:nth-child(even) td { background: var(--a-soft) !important; }
.table-wrapper tr:last-child td { border-bottom: none !important; }
/* Filet de securite si un tableau n'a pas de .table-wrapper */
article table, .rte table { width: 100% !important; border-collapse: collapse !important; margin: 24px 0 !important; font-size: 0.95em !important; }
article table th, .rte table th { background: var(--a-noir) !important; color: var(--a-clair) !important; text-align: left !important; font-weight: 700 !important; padding: 12px 14px !important; border-bottom: 2px solid var(--a-accent) !important; }
article table td, .rte table td { padding: 11px 14px !important; border-bottom: 1px solid var(--a-line) !important; vertical-align: top !important; color: var(--a-ink) !important; }

/* Focus clavier */
.visual-cta-button:focus-visible, .cta-button:focus-visible, .article-toc summary:focus-visible { outline: 2px solid var(--a-orange) !important; outline-offset: 2px !important; }

/* Mobile */
@media (max-width: 749px) {
  .visual-cta, .visual-cta.image-left, .visual-cta.image-right { flex-direction: column !important; align-items: flex-start !important; text-align: left !important; }
  .visual-cta .visual-cta-image { order: 1 !important; width: 90px !important; flex: 0 0 auto !important; }
  .visual-cta .content { order: 0 !important; width: 100% !important; }
  .visual-cta .visual-cta-button, .cta-button { width: 100% !important; text-align: center !important; }
  .comparison-cards { grid-template-columns: 1fr !important; }

  /* Tableaux : tenir dans l'ecran plutot que scroller */
  .table-wrapper table, article table, .rte table { width: 100% !important; min-width: 0 !important; font-size: 0.82em !important; }
  .table-wrapper th, .table-wrapper td,
  article table th, article table td, .rte table th, .rte table td {
    padding: 8px 9px !important; overflow-wrap: break-word !important; word-break: break-word !important;
  }
}

</style></head><body>
<div class="wrap">
<h2 style="margin-top:0">Aperçu des encarts Aéraly v7</h2>

<div class="tldr-box">
<p><strong>A retenir :</strong></p>
<ul>
<li>Coins arrondis et accent orange détaché, plus aucune barre plate collée au bord.</li>
<li>Le style des tableaux est réparé, il ne dépend plus du gabarit.</li>
<li>Une ombre chaude très légère décolle les cartes du fond.</li>
</ul>
</div>

<p>Voici un paragraphe courant pour juger de l'espacement autour des encarts et de la lisibilité générale sur fond de page.</p>

<div class="def-box"><p><strong>Définition :</strong> l'accent orange à gauche est désormais un court trait à bouts ronds, en retrait des bords, au lieu d'une barre pleine.</p></div>

<div class="info-box"><strong>Le repère qui simplifie tout</strong><p>Carte crème arrondie, accent orange détaché, label en petites capitales orange.</p></div>

<div class="key-takeaway"><strong>Ce qu'il faut retenir</strong><p>Carte blanche cerclée d'un filet chaud fin, coins arrondis et légère ombre.</p></div>

<div class="table-wrapper">
<table>
<tr><th>Emplacement</th><th>Hauteur au centre</th><th>Remarque</th></tr>
<tr><td>Salon, séjour</td><td>1,70 à 1,80 m</td><td>Au dessus du regard d'une personne debout</td></tr>
<tr><td>Couloir, escalier</td><td>1,70 à 1,90 m</td><td>Espacer de 2 à 3 m pour éviter les zones d'ombre</td></tr>
<tr><td>Tête de lit</td><td>1,10 à 1,30 m</td><td>Environ 60 cm au dessus du matelas</td></tr>
</table>
</div>

<div class="stat-callout"><p><strong>25 %</strong> des incendies seraient d'origine électrique. <a href="#">Voir la source</a></p></div>

<div class="dos-donts"><ul>
<li><strong>Couper au disjoncteur :</strong> pas seulement à l'interrupteur.</li>
<li><strong>Garder les bonnes chevilles :</strong> jamais celles de la boîte sur du placo.</li>
<li><strong>Tracer au niveau :</strong> deux appliques désalignées se voient tous les jours.</li>
</ul></div>

<div class="comparison-cards">
<div class="card"><strong>Applique à brancher</strong><p>Cordon et fiche sur une prise existante, aucun travail électrique.</p></div>
<div class="card"><strong>Applique sans fil</strong><p>Batterie rechargeable, fixation adhésive ou magnétique.</p></div>
<div class="card"><strong>Goulotte décorative</strong><p>Câble caché dans une moulure peinte au ton du mur.</p></div>
</div>

<div class="visual-cta image-right">
<div class="content">
<strong>Pas envie de percer ? Les lampes à poser font le même travail</strong>
<p>Lampes de chevet et lampes de table à brancher sur une prise existante, sans perçage.</p>
<a class="visual-cta-button" href="#">Voir les lampes →</a>
</div>
<img class="visual-cta-image" src="/cdn/shop/files/logo-aeraly-blanc.webp?v=1785621785" alt="Logo Aéraly" width="150">
</div>

<h2>Questions fréquentes</h2>
<div class="faq-plain">
<h3>Comment installer une applique murale ?</h3>
<p>Coupez le courant, tracez au niveau, percez avec le bon foret, raccordez les trois fils, fixez la platine.</p>
<h3>Quelle hauteur pour une applique ?</h3>
<p>Comptez 1,70 à 1,80 m au centre dans un salon, moins en tête de lit.</p>
</div>

<div class="author-box">
<img src="/cdn/shop/files/souleymane-kone.webp?v=1785441279" alt="Souleymane Koné" width="76" height="76">
<div class="author-content"><strong>Souleymane Koné</strong><p>Consultant en aménagement et équipement de la maison. Photo désormais en rond.</p><p class="author-date">Mis à jour le 8 août 2026</p></div>
</div>
</div>
</body></html>
/* Texte justifie sur mobile, avec cesure pour eviter les gros trous */
@media (max-width: 749px) {
  .rte p,
  .article-template__content p,
  .article__content p,
  .article-content p {
    text-align: justify !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
  }
}
/* Plus de logo dans les CTA */
.visual-cta .visual-cta-image { display: none !important; }
.visual-cta .content { width: 100% !important; }

/* Justifier le texte des articles sur mobile, avec cesure */
@media (max-width: 749px) {
  article p,
  .rte p,
  main p {
    text-align: justify !important;
    -webkit-hyphens: auto !important;
    hyphens: auto !important;
  }
}