/* =========================================================================
   KDM — GABARIT D'ARTICLE DE BLOG — 20/09/2026
   Page de reference : blog 13 « RDX : Tandberg Data est de retour ».
   Voir CLAUDE.md, section « Regles de conception de pages ».

   Prefixe .kdm-art pour ne pas entrer en collision avec .kdm-hero,
   qui appartient a la page leasing.

   Regles respectees :
   - aucune bordure gauche decorative (regle 1)
   - contraste mesure, pas suppose (regle 2)
   - FAQ en accordeon Elementor, pas ici (regle 4)
   - styles de titre poses une fois, pas en ligne (regle 8)
   ========================================================================= */

/* ---- Largeur de lecture et taille du texte ------------------------------
   MESURE DU 20/09/2026 : la racine du theme est a 14 px, donc `1rem` valait
   14 px et non 16. Sur 760 px cela donnait 111 caracteres par ligne, alors
   que la fourchette lisible est de 65 a 75.

   L'article n'etait donc pas trop etroit : ses lignes etaient trop longues
   parce que le texte etait trop petit. Elargir aurait aggrave le defaut.
   On corrige par la taille : 17 px sur 780 px donne environ 93 caracteres,
   et le texte remplit visuellement la colonne.

   Les tailles internes sont en `em` pour suivre cette base, pas en `rem`
   qui resterait accrochee aux 14 px de la racine.
   Les blocs pleine largeur sortent du conteneur avec .kdm-art-bleed. */
.kdm-art { font-size: 17px; line-height: 1.65; color: #33404d; }
.kdm-art > * { max-width: 780px; margin-left: auto; margin-right: auto; }
.kdm-art > .kdm-art-bleed { max-width: none; }
.kdm-art p { margin-bottom: 1.1rem; }
.kdm-art strong { color: #1a3d5c; }

/* ---- Titres de section --------------------------------------------------
   Etend aux articles la regle 8 posee pour les categories. */
#simpleblog .kdm-art h2,
.kdm-art h2 {
    font-size: 1.45em;
    line-height: 1.25;
    font-weight: 700;
    color: #1a3d5c;
    border-bottom: 2px solid #e94560;
    padding-bottom: 8px;
    margin: 2.6rem 0 1.1rem;
}
#simpleblog .kdm-art h3,
.kdm-art h3 {
    font-size: 1.15em;
    font-weight: 600;
    color: #1a3d5c;
    margin: 1.9rem 0 .5rem;
}

/* ---- Bandeau de tete ----------------------------------------------------
   Pleine largeur. Deux couches : un fond decoratif qui se decale au scroll
   (parallax) et l'illustration au premier plan, qui ne bouge pas.
   Le decalage est pose par custom.js, jamais sous 1024 px ni sous
   prefers-reduced-motion. */
.kdm-art-hero {
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 54px max(20px, calc((100vw - 1140px) / 2));
    background: linear-gradient(135deg, #14293d 0%, #1a3d5c 45%, #225a86 100%);
    color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    box-sizing: border-box;
}
.kdm-art-hero__bg {
    position: absolute;
    inset: -12% -5%;
    z-index: 0;
    pointer-events: none;
    opacity: .5;
    will-change: transform;
}
.kdm-art-hero__txt { position: relative; z-index: 2; flex: 1 1 340px; min-width: 300px; }
.kdm-art-hero__art { position: relative; z-index: 2; flex: 0 1 380px; min-width: 260px; }
.kdm-art-hero__art svg { width: 100%; height: auto; display: block; }

/* Contraste : fond le plus clair du degrade #225a86, blanc a 6,4:1. */
.kdm-art-hero, .kdm-art-hero p, .kdm-art-hero h2, .kdm-art-hero strong { color: #ffffff; }
.kdm-art-hero__badge {
    display: inline-block;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 20px;
    padding: 5px 16px;
    font-size: .72rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 16px;
}
.kdm-art-hero__titre { font-size: 1.85rem; line-height: 1.22; font-weight: 700; margin: 0 0 12px; }
.kdm-art-hero__chapo { font-size: 1.02rem; line-height: 1.6; margin: 0; color: #dbe6f0; }

@media (max-width: 1399.98px) { .kdm-art-hero { padding-left: max(20px, calc((100vw - 1140px)/2)); padding-right: max(20px, calc((100vw - 1140px)/2)); } }
@media (max-width: 1139.98px) { .kdm-art-hero { padding-left: max(20px, calc((100vw - 960px)/2));  padding-right: max(20px, calc((100vw - 960px)/2)); } }
@media (max-width: 991.98px)  { .kdm-art-hero { padding-left: max(20px, calc((100vw - 720px)/2));  padding-right: max(20px, calc((100vw - 720px)/2)); padding-top: 38px; padding-bottom: 38px; } }
@media (max-width: 767.98px)  { .kdm-art-hero__titre { font-size: 1.45rem; } .kdm-art-hero__art { display: none; } }

/* ---- L'essentiel --------------------------------------------------------
   Repere de lecture place juste sous le chapo.

   AUCUN FILET DECORATIF, ni a gauche ni en haut : l'accent de couleur vit
   dans une pastille d'icone, c'est-a-dire dans une forme. Un trait colore
   reste un trait colore, quel que soit le cote ou on le pose.

   Chaque tuile se retourne au survol et au focus clavier pour montrer le
   chiffre qui resume l'idee. Le recto se suffit a lui-meme : au toucher,
   ou le survol n'existe pas, rien n'est perdu. */
.kdm-art-key {
    background: #f2f6fa;
    border-radius: 12px;
    padding: 22px 24px;
    margin: 2rem auto 2.4rem;
}
.kdm-art-key__titre {
    font-size: .8em; letter-spacing: 1.4px; text-transform: uppercase;
    font-weight: 700; color: #1a3d5c; margin: 0 0 16px;
}
.kdm-art-key__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }

.kdm-art-key__item { perspective: 1000px; outline: none; }
.kdm-art-key__flip {
    position: relative;
    min-height: 178px;
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.2, .7, .3, 1);
}
.kdm-art-key__item:hover .kdm-art-key__flip,
.kdm-art-key__item:focus .kdm-art-key__flip,
.kdm-art-key__item:focus-within .kdm-art-key__flip { transform: rotateY(180deg); }

.kdm-art-key__face {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 16px 18px;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    box-shadow: 0 1px 3px rgba(26, 61, 92, .10);
    display: flex;
    flex-direction: column;
}
.kdm-art-key__face--av { background: #ffffff; }
.kdm-art-key__face--ar {
    background: #1a3d5c;
    transform: rotateY(180deg);
    justify-content: center;
}
/* la pastille porte l'accent, a la place du filet */
.kdm-art-key__ico {
    display: inline-flex;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #fdeaee;
    color: #b02a43;
    align-items: center; justify-content: center;
    margin-bottom: 11px;
}
.kdm-art-key__face--av b { display: block; color: #1a3d5c; font-size: .98em; margin-bottom: 5px; }
.kdm-art-key__face--av span { display: block; font-size: .88em; line-height: 1.5; color: #4d5a67; }
.kdm-art-key__chiffre { display: block; color: #ffffff; font-size: 1.45em; font-weight: 700; line-height: 1.15; margin-bottom: 7px; }
.kdm-art-key__face--ar span { display: block; color: #dbe6f0; font-size: .88em; line-height: 1.5; }
/* le focus clavier doit se voir : c'est lui qui declenche le retournement */
.kdm-art-key__item:focus .kdm-art-key__face,
.kdm-art-key__item:focus-within .kdm-art-key__face { box-shadow: 0 0 0 3px #7fb2dd, 0 1px 3px rgba(26, 61, 92, .10); }

/* Moins d'animation demande : pas de rotation, un simple fondu. */
@media (prefers-reduced-motion: reduce) {
    .kdm-art-key__flip { transition: none; }
    .kdm-art-key__item:hover .kdm-art-key__flip,
    .kdm-art-key__item:focus .kdm-art-key__flip,
    .kdm-art-key__item:focus-within .kdm-art-key__flip { transform: none; }
    .kdm-art-key__face { -webkit-backface-visibility: visible; backface-visibility: visible; transition: opacity .2s linear; }
    .kdm-art-key__face--ar { transform: none; opacity: 0; }
    .kdm-art-key__item:hover .kdm-art-key__face--ar,
    .kdm-art-key__item:focus .kdm-art-key__face--ar,
    .kdm-art-key__item:focus-within .kdm-art-key__face--ar { opacity: 1; }
}

/* ---- Encadre de mise en garde ------------------------------------------
   Pas de filet non plus : un fond ambre et une pastille d'icone. */
.kdm-art-note {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: #fff8e6;
    border-radius: 10px;
    padding: 16px 20px;
    margin: 1.6rem auto 1.8rem;
}
.kdm-art-note__ico {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: #fbe3b4;
    color: #8a5a00;
    display: inline-flex; align-items: center; justify-content: center;
}
.kdm-art-note p { margin: 0; font-size: .95em; }

/* ---- Cartes produit -----------------------------------------------------
   Reparties dans le fil du texte, au moment ou le lecteur a la question.
   La carte entiere est cliquable. */
.kdm-art-cards { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 1.5rem auto 2rem; }
.kdm-art-card {
    flex: 1 1 180px; max-width: 214px;
    display: block; text-decoration: none; color: inherit;
    background: #ffffff; border: 1px solid #dde4ec; border-radius: 10px;
    padding: 14px; text-align: center;
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.kdm-art-card:hover, .kdm-art-card:focus {
    border-color: #b9cbdd; box-shadow: 0 6px 18px rgba(26,61,92,.12);
    transform: translateY(-2px); text-decoration: none;
}
.kdm-art-card img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.kdm-art-card__ph {
    height: 112px; display: flex; align-items: center; justify-content: center;
    background: #f1f4f8; border-radius: 6px; color: #1a3d5c; font-weight: 700;
}
.kdm-art-card__ref { display: block; font-weight: 700; color: #1a3d5c; font-size: .92em; margin-top: 11px; }
.kdm-art-card__lib { display: block; font-size: .85em; line-height: 1.4; color: #55616e; margin-top: 3px; }
.kdm-art-card__cta { display: block; margin-top: 9px; font-size: .82em; font-weight: 700; color: #c3304a; }

/* ---- Passages en colonnes ----------------------------------------------
   A n'utiliser QUE pour du contenu reellement parallele : deux faces d'une
   meme question, une liste d'elements courts et independants.

   JAMAIS sur du texte suivi. Mettre de la prose en colonnes oblige le
   lecteur a remonter en haut de page a la fin de chaque colonne, et la
   hauteur de colonne depend de la fenetre : un journal s'en sort parce que
   sa page a une hauteur fixe, une page web non.

   Retombe sur une colonne sous 900 px. */
.kdm-art-duo, .kdm-art-trio { display: grid; gap: 18px; margin: 1.6rem auto 2rem; }
@media (min-width: 900px) {
    .kdm-art-duo  { grid-template-columns: 1fr 1fr; }
    .kdm-art-trio { grid-template-columns: repeat(3, 1fr); }
}
.kdm-art-col { background: #f7fafc; border-radius: 10px; padding: 18px 20px; }
.kdm-art-col--danger { background: #fdeef1; }
.kdm-art-col--sur    { background: #edf7f0; }
.kdm-art-col__tete { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.kdm-art-col__ico {
    flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
}
.kdm-art-col--danger .kdm-art-col__ico { background: #f8d2da; color: #a3253c; }
.kdm-art-col--sur    .kdm-art-col__ico { background: #cfe8d8; color: #1d6b3d; }
.kdm-art-col__tete b { color: #1a3d5c; font-size: 1em; }
.kdm-art-col ul { list-style: none; padding: 0; margin: 0; }
.kdm-art-col li { font-size: .92em; line-height: 1.5; padding: 7px 0; border-top: 1px solid rgba(26,61,92,.09); }
.kdm-art-col li:first-child { border-top: 0; }

/* ---- Tableaux -----------------------------------------------------------
   Defilent horizontalement sur petit ecran plutot que de deborder. */
.kdm-art-tw { overflow-x: auto; margin: 1.5rem auto 1.8rem; }
.kdm-art-table { width: 100%; border-collapse: collapse; font-size: .92em; }
.kdm-art-table th {
    background: #1a3d5c; color: #ffffff; font-weight: 600; text-align: left;
    padding: 11px 13px; border: 1px solid #1a3d5c;
}
.kdm-art-table td { padding: 11px 13px; border: 1px solid #dde4ec; vertical-align: top; }
.kdm-art-table tr:nth-child(even) td { background: #f7fafc; }
.kdm-art-table td:first-child { font-weight: 600; color: #1a3d5c; }

/* ---- Schema d'installation ---------------------------------------------
   Bloc pleine largeur : trois scenarios cote a cote sur grand ecran,
   empiles en dessous. */
.kdm-art-diag { background: #f2f6fa; border-radius: 12px; padding: 26px 24px; margin: 2rem auto 2.4rem; }
.kdm-art-diag__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 18px; }
.kdm-art-scenario { background: #ffffff; border: 1px solid #dde4ec; border-radius: 10px; padding: 18px; }
.kdm-art-scenario svg { width: 100%; height: auto; display: block; margin-bottom: 12px; }
.kdm-art-scenario h3 { margin: 0 0 4px; font-size: 1.02em; }
.kdm-art-scenario p { font-size: .88em; line-height: 1.5; color: #55616e; margin-bottom: .8rem; }
.kdm-art-scenario ul { list-style: none; padding: 0; margin: 0; }
.kdm-art-scenario li { font-size: .88em; line-height: 1.45; padding: 6px 0; border-top: 1px solid #eef2f6; }
.kdm-art-scenario li:first-child { border-top: 0; }
.kdm-art-scenario li a { font-weight: 600; }

/* ---- Pas a pas ----------------------------------------------------------
   Numerotation visible, une etape par ligne, sans bordure gauche. */
.kdm-art-steps { counter-reset: kdmstep; margin: 1.6rem auto 2rem; }
.kdm-art-step { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid #e3e9ef; }
.kdm-art-step:first-child { border-top: 0; }
.kdm-art-step__n {
    counter-increment: kdmstep;
    flex: 0 0 34px; height: 34px; border-radius: 50%;
    background: #1a3d5c; color: #ffffff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .98em;
}
.kdm-art-step__n::before { content: counter(kdmstep); }
.kdm-art-step__c b { display: block; color: #1a3d5c; margin-bottom: 3px; }
.kdm-art-step__c p { margin: 0; font-size: .95em; }

/* ---- Appels a l'action --------------------------------------------------
   Plusieurs points de scroll, pas un seul en fin d'article. */
.kdm-art-cta { text-align: center; margin: 2rem auto 2.2rem; }
.kdm-art-cta a {
    display: inline-block; margin: 6px 8px 6px 0;
    padding: 13px 24px; border-radius: 6px;
    background: #1a3d5c; color: #ffffff; font-weight: 700; text-decoration: none;
}
.kdm-art-cta a:hover, .kdm-art-cta a:focus { background: #14293d; color: #ffffff; text-decoration: none; }
.kdm-art-cta a.is-ghost { background: transparent; color: #1a3d5c; border: 2px solid #1a3d5c; }
.kdm-art-cta a.is-ghost:hover { background: #1a3d5c; color: #ffffff; }

/* ---- Bloc de fin --------------------------------------------------------- */
.kdm-art-end { background: #f2f6fa; border-radius: 12px; padding: 22px 24px; margin: 2.2rem auto 0; }
.kdm-art-end p { margin: 0; font-size: .95em; }

/* ---- Accordeon FAQ Elementor sur un article -----------------------------
   Le widget ne sort pas de border-radius : pose ici, comme pour les autres
   accordeons du site. */
#simpleblog .elementor-accordion .elementor-accordion-item { border-radius: 8px; overflow: hidden; margin-bottom: 8px; }
/* ===================== fin gabarit d'article de blog ===================== */