/*
Theme Name: Couleurs d'Intérieur - Le Blog
Theme URI: https://www.couleurs-dinterieur.com
Author: Natacha Labruyère
Description: Thème de blog aux couleurs du site couleurs-dinterieur.com. Reprend fidèlement le logo, les couleurs, la typographie, la navigation et le pied de page du site principal afin qu'un visiteur passant sur « Actualités du Blog » n'ait pas l'impression de changer de site. Pour modifier l'URL du site principal, voir functions.php (constante CDI_SITE_PRINCIPAL).
Version: 1.0.0
Requires at least: 5.5
Tested up to: 6.5
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: couleurs-interieur-blog
Tags: blog, one-column, right-sidebar, custom-logo, custom-menu, featured-images, translation-ready
*/

/* =========================================================================
   Palette prélevée sur le site couleurs-dinterieur.com
   ------------------------------------------------------------------------- */
:root{
    --cdi-accent:        #a26a5f; /* terracotta / brun - titres & boutons */
    --cdi-accent-hover:  #8c584e;
    --cdi-accent-soft:   #c5a995; /* beige rosé - sous-titres */
    --cdi-text:          #516673; /* gris bleuté - texte courant */
    --cdi-heading:       #a26a5f;
    --cdi-bg:            #eeeeee; /* fond général */
    --cdi-surface:       #ffffff; /* cartes / contenu */
    --cdi-header-bg:     #ffffff;
    --cdi-footer-bg:     #3a3a3a;
    --cdi-footer-text:   #e8e6e4;
    --cdi-border:        #e2ddd8;

    --cdi-font-title: "Old Standard TT", Georgia, "Times New Roman", serif;
    --cdi-font-sub:   "Roboto Slab", Georgia, serif;
    --cdi-font-body:  "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    --cdi-font-nav:   "Playfair Display", Georgia, serif;

    --cdi-maxw: 1180px;
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
    margin:0;
    background:var(--cdi-bg);
    color:var(--cdi-text);
    font-family:var(--cdi-font-body);
    font-size:18px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; }
a{ color:var(--cdi-accent); text-decoration:none; }
a:hover,a:focus{ color:var(--cdi-accent-hover); text-decoration:underline; }

h1,h2,h3,h4,h5,h6{ color:var(--cdi-heading); line-height:1.25; margin:0 0 .5em; }
h1{ font-family:var(--cdi-font-title); font-weight:600; font-size:2.4rem; }
h2{ font-family:var(--cdi-font-sub); color:var(--cdi-accent-soft); font-weight:600; font-size:1.4rem; text-transform:uppercase; letter-spacing:.02em; }
h3{ font-family:var(--cdi-font-title); font-weight:600; font-size:1.5rem; }
h4,h5,h6{ font-family:var(--cdi-font-sub); }
p{ margin:0 0 1.1em; }

.cdi-container{ width:100%; max-width:var(--cdi-maxw); margin:0 auto; padding:0 22px; }

/* Accessibilité : lien d'évitement */
.skip-link{ position:absolute; left:-9999px; top:0; background:var(--cdi-accent); color:#fff; padding:10px 16px; z-index:100000; }
.skip-link:focus{ left:8px; top:8px; text-decoration:none; }
.screen-reader-text{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }

/* =========================================================================
   HEADER  (conçu pour ne jamais casser : titre borné, menu qui passe à la
   ligne proprement, aucun chevauchement même sans logo)
   ------------------------------------------------------------------------- */
.site-header{
    background:var(--cdi-header-bg);
    border-bottom:1px solid var(--cdi-border);
    box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.site-header .cdi-container{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:14px 26px;
    padding-top:16px;
    padding-bottom:16px;
}
/* Zone marque : largeur bornée pour ne jamais pousser le menu hors écran */
.site-branding{
    display:flex;
    align-items:center;
    min-width:0;            /* autorise le rétrécissement */
    max-width:340px;
    flex:0 1 auto;
}
.site-branding .custom-logo,
.site-branding .cdi-logo-img{
    display:block;
    height:70px;
    width:auto;
    max-width:100%;
}
.site-branding .site-title{
    font-family:var(--cdi-font-title);
    font-weight:600;
    font-size:1.35rem;
    line-height:1.15;
    margin:0;
    color:var(--cdi-accent);
    /* titre long : passe à la ligne, ne déborde jamais */
    overflow-wrap:anywhere;
    word-break:break-word;
    hyphens:auto;
}
.site-branding .site-title a{ color:inherit; text-decoration:none; }
.site-branding .site-description{
    margin:2px 0 0;
    font-size:.82rem;
    color:var(--cdi-text);
    overflow-wrap:anywhere;
}

/* Navigation */
.main-navigation{ flex:1 1 auto; min-width:0; }
.main-navigation .cdi-menu{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;              /* les items passent à la ligne au lieu de chevaucher */
    align-items:center;
    justify-content:flex-end;
    gap:6px 4px;
}
.main-navigation .cdi-menu > li{ position:relative; }
.main-navigation .cdi-menu a{
    display:block;
    font-family:var(--cdi-font-nav);
    font-size:1.02rem;
    color:var(--cdi-text);
    padding:8px 12px;
    border-radius:4px;
    text-decoration:none;
    white-space:nowrap;
    transition:color .15s ease, background .15s ease;
}
.main-navigation .cdi-menu a:hover,
.main-navigation .cdi-menu a:focus{ color:var(--cdi-accent); }

/* Onglet actif (le blog) mis en valeur, comme sur le site */
.main-navigation .cdi-menu .cdi-current > a{
    color:var(--cdi-accent);
    font-weight:600;
}
.main-navigation .cdi-menu .cdi-current > a::after{
    content:"";
    display:block;
    height:2px;
    background:var(--cdi-accent);
    border-radius:2px;
    margin-top:4px;
}

/* Sous-menus (déroulants), contenus pour ne pas déformer le header */
.main-navigation .sub-menu{
    list-style:none;
    margin:0; padding:6px;
    position:absolute;
    top:100%; left:0;
    min-width:230px;
    background:var(--cdi-surface);
    border:1px solid var(--cdi-border);
    border-radius:6px;
    box-shadow:0 10px 26px rgba(0,0,0,.10);
    opacity:0; visibility:hidden; transform:translateY(6px);
    transition:opacity .16s ease, transform .16s ease, visibility .16s;
    z-index:50;
}
.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu{
    opacity:1; visibility:visible; transform:translateY(0);
}
.main-navigation .sub-menu a{ white-space:normal; font-size:.96rem; }

/* Bouton "Programmer un appel" */
.cdi-cta{
    display:inline-block;
    font-family:var(--cdi-font-nav);
    font-size:.92rem;
    letter-spacing:.03em;
    color:#fff!important;
    background:var(--cdi-accent);
    padding:12px 20px;
    border-radius:6px;
    text-decoration:none!important;
    text-transform:uppercase;
    line-height:1.15;
    text-align:center;
    box-shadow:0 2px 6px rgba(162,106,95,.25);
    transition:background .15s ease;
    white-space:normal;
    max-width:220px;
}
.cdi-cta:hover,.cdi-cta:focus{ background:var(--cdi-accent-hover); color:#fff!important; }
.site-header .cdi-cta{ flex:0 0 auto; }

/* =========================================================================
   CONTENU
   ------------------------------------------------------------------------- */
.site-content{ padding:38px 0 46px; }
.cdi-layout{ display:flex; flex-wrap:wrap; gap:38px; align-items:flex-start; }
.content-area{ flex:1 1 620px; min-width:0; }
.widget-area{ flex:0 1 300px; }

/* Cartes d'article (liste / archives) */
.cdi-entry{
    background:var(--cdi-surface);
    border:1px solid var(--cdi-border);
    border-radius:8px;
    overflow:hidden;
    margin-bottom:30px;
}
.cdi-entry .cdi-thumb img{ display:block; width:100%; height:auto; }
.cdi-entry .cdi-entry-inner{ padding:24px 26px 28px; }
.cdi-entry .entry-title{ margin:0 0 .35em; font-size:1.7rem; }
.cdi-entry .entry-title a{ color:var(--cdi-accent); text-decoration:none; }
.cdi-entry .entry-title a:hover{ color:var(--cdi-accent-hover); }
.cdi-meta{
    font-family:var(--cdi-font-sub);
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--cdi-accent-soft);
    margin-bottom:14px;
}
.cdi-meta a{ color:var(--cdi-accent-soft); }
.cdi-excerpt{ color:var(--cdi-text); }
.cdi-readmore{
    display:inline-block;
    margin-top:8px;
    font-family:var(--cdi-font-nav);
    color:var(--cdi-accent);
    border-bottom:1px solid currentColor;
    padding-bottom:1px;
}
.cdi-readmore:hover{ text-decoration:none; color:var(--cdi-accent-hover); }

/* Article seul & pages */
.cdi-single,.cdi-page{
    background:var(--cdi-surface);
    border:1px solid var(--cdi-border);
    border-radius:8px;
    padding:34px 40px 40px;
}
.cdi-single .entry-header,.cdi-page .entry-header{ margin-bottom:22px; }
.cdi-single .entry-title,.cdi-page .entry-title{ font-size:2.3rem; margin-bottom:.2em; }
.cdi-single .cdi-featured{ margin:0 0 26px; border-radius:6px; overflow:hidden; }
.entry-content{ font-size:1.06rem; }
.entry-content a{ color:var(--cdi-accent); text-decoration:underline; }
.entry-content img{ border-radius:6px; }
.entry-content blockquote{
    margin:1.4em 0;
    padding:.4em 1.2em;
    border-left:4px solid var(--cdi-accent-soft);
    color:#5f6f7a;
    font-style:italic;
    background:#faf7f4;
}
.entry-content h2{ margin-top:1.3em; }
.entry-footer{ margin-top:26px; padding-top:18px; border-top:1px solid var(--cdi-border); font-size:.9rem; color:var(--cdi-text); }
.entry-footer a{ color:var(--cdi-accent); }

/* En-tête d'archive / résultats */
.cdi-archive-header{
    background:var(--cdi-surface);
    border:1px solid var(--cdi-border);
    border-radius:8px;
    padding:24px 28px;
    margin-bottom:28px;
}
.cdi-archive-header .cdi-archive-title{ margin:0; font-size:1.9rem; }
.cdi-archive-header .cdi-archive-desc{ margin:.5em 0 0; color:var(--cdi-text); }

/* Pagination */
.cdi-pagination{ margin:10px 0 0; }
.cdi-pagination .nav-links{ display:flex; flex-wrap:wrap; gap:8px; }
.cdi-pagination .page-numbers{
    display:inline-block;
    padding:8px 14px;
    background:var(--cdi-surface);
    border:1px solid var(--cdi-border);
    border-radius:5px;
    color:var(--cdi-text);
    font-family:var(--cdi-font-nav);
    text-decoration:none;
}
.cdi-pagination .page-numbers.current,
.cdi-pagination .page-numbers:hover{ background:var(--cdi-accent); border-color:var(--cdi-accent); color:#fff; }

/* Navigation article précédent/suivant */
.cdi-post-nav{ margin-top:30px; }
.cdi-post-nav .nav-links{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; }
.cdi-post-nav a{ font-family:var(--cdi-font-nav); color:var(--cdi-accent); }

/* =========================================================================
   SIDEBAR / WIDGETS
   ------------------------------------------------------------------------- */
.widget{
    background:var(--cdi-surface);
    border:1px solid var(--cdi-border);
    border-radius:8px;
    padding:20px 22px;
    margin-bottom:24px;
}
.widget-title{
    font-family:var(--cdi-font-sub);
    font-size:.95rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--cdi-accent);
    margin:0 0 14px;
    padding-bottom:10px;
    border-bottom:1px solid var(--cdi-border);
}
.widget ul{ list-style:none; margin:0; padding:0; }
.widget ul li{ padding:6px 0; border-bottom:1px dashed var(--cdi-border); }
.widget ul li:last-child{ border-bottom:0; }
.widget a{ color:var(--cdi-text); }
.widget a:hover{ color:var(--cdi-accent); }

/* Formulaire de recherche */
.cdi-search-form{ display:flex; gap:8px; }
.cdi-search-form .search-field{
    flex:1 1 auto; min-width:0;
    padding:10px 12px;
    border:1px solid var(--cdi-border);
    border-radius:5px;
    font-family:var(--cdi-font-body);
    font-size:.95rem;
    background:#fff;
    color:var(--cdi-text);
}
.cdi-search-form .search-submit{
    flex:0 0 auto;
    background:var(--cdi-accent);
    color:#fff;
    border:0;
    border-radius:5px;
    padding:10px 16px;
    font-family:var(--cdi-font-nav);
    cursor:pointer;
}
.cdi-search-form .search-submit:hover{ background:var(--cdi-accent-hover); }

/* =========================================================================
   COMMENTAIRES
   ------------------------------------------------------------------------- */
.comments-area{
    background:var(--cdi-surface);
    border:1px solid var(--cdi-border);
    border-radius:8px;
    padding:28px 32px;
    margin-top:30px;
}
.comments-title,.comment-reply-title{ font-family:var(--cdi-font-title); color:var(--cdi-accent); font-size:1.5rem; }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-list li{ margin:0 0 18px; }
.comment-body{ padding:16px 18px; border:1px solid var(--cdi-border); border-radius:6px; background:#faf8f6; }
.comment-author .fn{ font-family:var(--cdi-font-sub); color:var(--cdi-accent); font-style:normal; }
.comment-metadata{ font-size:.78rem; color:var(--cdi-accent-soft); }
.comment-form label{ display:block; font-family:var(--cdi-font-sub); font-size:.85rem; margin-bottom:4px; color:var(--cdi-text); }
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea{
    width:100%;
    padding:10px 12px;
    border:1px solid var(--cdi-border);
    border-radius:5px;
    font-family:var(--cdi-font-body);
    margin-bottom:14px;
    background:#fff;
    color:var(--cdi-text);
}
.comment-form .submit,
.form-submit input{
    background:var(--cdi-accent);
    color:#fff;
    border:0;
    border-radius:5px;
    padding:11px 22px;
    font-family:var(--cdi-font-nav);
    cursor:pointer;
}
.comment-form .submit:hover{ background:var(--cdi-accent-hover); }

/* =========================================================================
   404
   ------------------------------------------------------------------------- */
.cdi-404{
    background:var(--cdi-surface);
    border:1px solid var(--cdi-border);
    border-radius:8px;
    padding:48px 40px;
    text-align:center;
}
.cdi-404 .cdi-404-code{ font-family:var(--cdi-font-title); font-size:4rem; color:var(--cdi-accent-soft); margin:0; }

/* =========================================================================
   FOOTER  (repris fidèlement du site : fond anthracite, logo, contact,
   réseaux, liens, mentions)
   ------------------------------------------------------------------------- */
.site-footer{
    background:var(--cdi-footer-bg);
    color:var(--cdi-footer-text);
    padding:52px 0 26px;
    margin-top:20px;
    font-family:var(--cdi-font-body);
}
.site-footer a{ color:var(--cdi-footer-text); }
.site-footer a:hover{ color:#fff; }
.cdi-footer-grid{
    display:flex;
    flex-wrap:wrap;
    gap:34px;
    justify-content:space-between;
}
.cdi-footer-col{ flex:1 1 280px; min-width:0; }
.cdi-footer-brand{ font-family:var(--cdi-font-title); font-size:1.5rem; color:#fff; margin:0 0 10px; }
.cdi-footer-brand .cdi-brand-last{ font-family:var(--cdi-font-sub); letter-spacing:.14em; font-size:1rem; display:block; margin-top:2px; }
.cdi-footer-baseline{ margin:0 0 8px; }
.cdi-footer-audience{ font-weight:600; color:#fff; margin:6px 0 14px; }
.cdi-footer-contact{ margin:0 0 14px; line-height:1.7; }
.cdi-footer-contact a{ text-decoration:none; }
.cdi-footer-zone{ font-size:.9rem; color:#cfccc9; line-height:1.6; }

/* Colonne centrale : logo (traité en blanc pour le fond sombre) + url */
.cdi-footer-center{ text-align:center; }
.cdi-footer-logo{
    display:inline-block;
    height:96px; width:auto; max-width:100%;
    /* Le logo du site est en linework sombre ; sur le pied de page sombre on
       le rend blanc — exactement comme le site principal. */
    filter:brightness(0) invert(1);
    opacity:.95;
}
.cdi-footer-url{ display:block; margin-top:10px; color:var(--cdi-accent-soft); letter-spacing:.04em; text-decoration:none; }

/* Réseaux sociaux */
.cdi-social{ display:flex; gap:14px; justify-content:center; margin:18px 0 0; padding:0; list-style:none; }
.cdi-social a{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%;
    border:1px solid rgba(255,255,255,.35);
    color:#fff;
    transition:background .15s ease, border-color .15s ease;
}
.cdi-social a:hover{ background:var(--cdi-accent); border-color:var(--cdi-accent); }
.cdi-social svg{ width:18px; height:18px; fill:currentColor; }

/* Liens du pied de page (colonne droite) */
.cdi-footer-links{ text-align:right; line-height:2; }
.cdi-footer-links a{ text-decoration:none; }
.cdi-footer-links a:hover{ color:var(--cdi-accent-soft); }
.cdi-footer-links .cdi-sep{ color:rgba(255,255,255,.4); margin:0 6px; }

.cdi-copyright{
    margin-top:34px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.14);
    font-size:.82rem;
    color:#bdb9b6;
    text-align:center;
}

/* =========================================================================
   RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width:900px){
    .site-header .cdi-container{ justify-content:center; text-align:center; }
    .site-branding{ max-width:none; justify-content:center; }
    .main-navigation .cdi-menu{ justify-content:center; }
    .cdi-footer-links{ text-align:center; }
    .cdi-footer-center{ order:-1; }
}
@media (max-width:600px){
    body{ font-size:17px; }
    h1{ font-size:2rem; }
    .cdi-single,.cdi-page{ padding:24px 20px 28px; }
    .cdi-single .entry-title,.cdi-page .entry-title{ font-size:1.8rem; }
    .site-branding .custom-logo,
    .site-branding .cdi-logo-img{ height:58px; }
    .main-navigation .sub-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0 0 0 14px; min-width:0; }
}

/* Alignements WordPress standards */
.alignleft{ float:left; margin:0 1.4em 1em 0; }
.alignright{ float:right; margin:0 0 1em 1.4em; }
.aligncenter{ display:block; margin:0 auto 1em; }
.wp-caption{ max-width:100%; }
.wp-caption-text{ font-size:.85rem; color:var(--cdi-accent-soft); text-align:center; }
.sticky,.gallery-caption,.bypostauthor{}