:root {
    --color-primary: #87d01e;
    --color-secondary: #19232d;
    --color-bg: #ffffff;
    --color-text: #606569;
    --color-surface: #F5F5F5;
    --color-surface-alt: #F5F6F6;
    --color-border: #E2E3E4;
    --color-text-muted: #707478;
    --radius-card: 3px;
    --shadow-card: 0 1px 0 rgba(0,0,0,.12);
    --font-heading: "Roboto Slab", Georgia, serif;
    --font-body: "Open Sans", Arial, sans-serif;
    --color-sur-secondary: #ffffff;
    --color-sur-primary: #606569;
    --focus-ring: #606569;
}

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
@supports not selector(:focus-visible) {
    :focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
}

/* insidedaweb.com — ce qui reste de l'habillage SmartMag 2.3 (captures Wayback, style.css et
   responsive.css 20181023, skin-light.css) dans la nouvelle version : les parties d'epoque gardees
   dans les billets (commentaires et retroliens, visionneuse, facade video, emoji, tailles d'epoque
   des images) et la pagination. Tout le reste suit socle.css depuis le lot V1.6 ; l'habillage
   SmartMag complet est dans le tag git insidedaweb-iso. Les couleurs ne vivent que dans :root. */

:root {
  /* Accents : CSS personnalisee de SmartMag capturee (?bunyad_custom_css=1, 20141017143825),
     une couleur par rubrique (.cat-N) ; table des rubriques : data/taxonomie_smartmag.json */
  --idw-vert: #87d01e;          /* couleur principale : accueil, archives, rubriques sans couleur */
  --idw-orange: #f34419;        /* Ecommerce, Magento eCommerce et leurs sous-rubriques */
  --idw-bleu: #286fa7;          /* Emailing et ses sous-rubriques */
  --idw-bleu-clair: #4486f7;    /* Referencement, Google, Google Analytics, Reseaux sociaux et les leurs */
  --idw-violet: #a10684;        /* Informatique Libre / FOSS et ses sous-rubriques */
  --idw-accent: var(--idw-vert);
  /* Facade video : lecteur Vimeo avant le clic (approximation, le lecteur d'epoque n'est pas fige) */
  --idw-video-fond: #000;
  --idw-video-bouton: rgba(23, 35, 34, 0.75);
  --idw-video-actif: #00adef;
  --idw-voile-visionneuse: rgba(0, 0, 0, 0.8);  /* visionneuse des images (prettyPhoto) */
  /* SmartMag style.css + skin-light.css */
  --idw-encre: #19232d;
  --idw-texte: #606569;
  --idw-meta: #a6a6a6;
  --idw-fond: #fff;
  --idw-sur-accent: #fff;
  --idw-bord: #d9d9d9;
  --idw-page: #ebebeb;
  --idw-page-texte: #676767;
}

.idw--orange { --idw-accent: var(--idw-orange); }
.idw--bleu { --idw-accent: var(--idw-bleu); }
.idw--bleu-clair { --idw-accent: var(--idw-bleu-clair); }
.idw--violet { --idw-accent: var(--idw-violet); }

.idw__icone { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; }
.idw__masque { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }

/* Pagination (div.main-pagination) : listes et recherche */
.idw__pagination { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.idw__page { display: block; padding: 0 10px; background: var(--idw-page); color: var(--idw-page-texte); font-size: 13px; line-height: 25px; }
.idw__page--courante, a.idw__page:hover { background: var(--idw-accent); color: var(--idw-sur-accent); text-decoration: none; }

/* Facade video, aux dimensions des iframes d'origine (580 x 475) ; l'iframe la remplace au clic */
.idw__video { position: relative; display: block; width: 580px; max-width: 100%; height: auto; aspect-ratio: 580 / 475; overflow: hidden; border: 0; background: var(--idw-video-fond); }
.idw__video img { width: 100%; height: 100%; object-fit: contain; }
.idw__video-titre { position: absolute; top: 10px; left: 10px; right: 10px; color: var(--idw-video-actif); font-weight: 700; font-size: 1.2em; line-height: 1.3; }
.idw__video-lecture { position: absolute; bottom: 10px; left: 10px; width: 65px; height: 40px; border-radius: 5px; background: var(--idw-video-bouton); color: var(--idw-sur-accent); }
.idw__video-lecture svg { display: block; width: 20px; height: 20px; margin: 10px auto; fill: currentColor; }
.idw__video:hover .idw__video-lecture, .idw__video:focus-visible .idw__video-lecture { background: var(--idw-video-actif); }

/* Emoji de wp-emoji (twemoji fige) */
.idw__emoji { display: inline; width: 1em; height: 1em; margin: 0 0.07em; padding: 0; border: 0; background: none; box-shadow: none; vertical-align: -0.1em; }

/* Visionneuse : prettyPhoto (JS) a l'epoque, ici en CSS (:target), sans les animations */
.idw__lb { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: var(--idw-voile-visionneuse); }
.idw__lb:target { display: flex; }
.idw__lb-voile { position: absolute; inset: 0; cursor: zoom-out; }
.idw__lb-voile::after { content: "\00d7"; position: absolute; top: 14px; right: 21px; color: var(--idw-sur-accent); font-size: 32px; line-height: 1; }
.idw__lb img { position: relative; box-sizing: border-box; max-width: 90vw; max-height: 90vh; width: auto; height: auto; border: 10px solid var(--idw-fond); pointer-events: none; }

/* Commentaires (div.comments de SmartMag), fermes : avatar 40 px flottant, meta, texte et reponses
   en retrait de 75px. Le nom de l'auteur du billet etait un lien en couleur : ici du texte. */
.idw__commentaires-liste { margin: 0; padding: 0; list-style: none; }
.idw__commentaire { margin-top: 28px; }
.idw__commentaire-avatar img { float: left; }
.idw__commentaire-meta, .idw__commentaire-texte, .idw__commentaires-enfants { margin-left: 75px; }
.idw__commentaire-meta { color: var(--idw-meta); font-size: 12px; }
.idw__commentaire-auteur, .idw__commentaire-meta a { display: inline-block; margin-right: 2px; color: var(--idw-texte); text-transform: uppercase; }
.idw__commentaire--auteur > article .idw__commentaire-auteur { color: var(--idw-accent); }
.idw__commentaire-texte { position: relative; margin-top: 14px; padding-bottom: 42px; border-bottom: 1px solid var(--idw-bord); font-size: 13px; line-height: 1.714; }
.idw__commentaire-texte p { margin-bottom: 0; }
/* Pings (.comments-list .pingback de SmartMag), au premier niveau a leur rang ; le titre etait un lien */
.idw__ping { margin-left: 75px; padding-top: 21px; border-bottom: 1px solid var(--idw-bord); font-size: 13px; }
.idw__ping-titre { color: var(--idw-encre); }
/* CommentLuv (commentluv.css capture le 20141017083927) : le titre etait un lien (couleur des liens) */
.idw__cluv { display: block; padding: 5px; border: 1px solid var(--idw-fond); }
.idw__cluv-titre { color: var(--idw-encre); }
.idw__cluv-coeur { margin: 0 0 -2px 5px; padding-left: 3px; }

/* Tailles d'epoque (lot 5) : image du texte servie en original a la place d'une variante absente
   (decision 10) ; recadrage au centre, fichiers non redimensionnes. Les regles idw__t-LxH sont
   GENEREES par scripts/insidedaweb_pages.py entre les deux marques : ne pas les editer. */
/* idw:tailles debut */
.idw__t-232x300 { width: 232px; aspect-ratio: 232 / 300; }
.idw__t-300x117 { width: 300px; aspect-ratio: 300 / 117; }
.idw__t-300x243 { width: 300px; aspect-ratio: 300 / 243; }
.idw__t-564x107 { width: 564px; aspect-ratio: 564 / 107; }
.idw__t-564x112 { width: 564px; aspect-ratio: 564 / 112; }
.idw__t-564x119 { width: 564px; aspect-ratio: 564 / 119; }
.idw__t-564x127 { width: 564px; aspect-ratio: 564 / 127; }
.idw__t-564x132 { width: 564px; aspect-ratio: 564 / 132; }
.idw__t-564x143 { width: 564px; aspect-ratio: 564 / 143; }
.idw__t-564x201 { width: 564px; aspect-ratio: 564 / 201; }
.idw__t-564x260 { width: 564px; aspect-ratio: 564 / 260; }
.idw__t-564x272 { width: 564px; aspect-ratio: 564 / 272; }
.idw__t-564x302 { width: 564px; aspect-ratio: 564 / 302; }
.idw__t-564x308 { width: 564px; aspect-ratio: 564 / 308; }
.idw__t-564x317 { width: 564px; aspect-ratio: 564 / 317; }
.idw__t-564x318 { width: 564px; aspect-ratio: 564 / 318; }
.idw__t-564x341 { width: 564px; aspect-ratio: 564 / 341; }
.idw__t-564x356 { width: 564px; aspect-ratio: 564 / 356; }
.idw__t-564x363 { width: 564px; aspect-ratio: 564 / 363; }
.idw__t-564x367 { width: 564px; aspect-ratio: 564 / 367; }
.idw__t-564x375 { width: 564px; aspect-ratio: 564 / 375; }
.idw__t-564x384 { width: 564px; aspect-ratio: 564 / 384; }
.idw__t-564x391 { width: 564px; aspect-ratio: 564 / 391; }
.idw__t-564x392 { width: 564px; aspect-ratio: 564 / 392; }
.idw__t-564x398 { width: 564px; aspect-ratio: 564 / 398; }
.idw__t-564x784 { width: 564px; aspect-ratio: 564 / 784; }
.idw__t-702x302 { width: 702px; aspect-ratio: 702 / 302; }
.idw__t-702x336 { width: 702px; aspect-ratio: 702 / 336; }
.idw__t-702x418 { width: 702px; aspect-ratio: 702 / 418; }
/* idw:tailles fin */

/* Points de rupture de responsive.css : 767 / 400 */
@media (max-width: 767px) {
  .idw__commentaires-enfants { margin-left: 15px; }
}
@media (max-width: 400px) {
  .idw__commentaire-meta { margin-left: 20%; }
  .idw__commentaire-texte { margin-left: 0; margin-top: 28px; }
  .idw__ping { margin-left: 0; }
}