/*
Theme Name: Seo Friendly - FR
Author: Olivier Wilhelmus
Description: Thème optimisé SEO /fr/
Version: 2.1
*/

/* === BASE === */
body {
    background: #c5d5e3; 
    color: #1c1e21;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

a {
    color: #385898; 
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* === TITRES === */
h1, h2, h3, h4 {
    color: #385898;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: bold;
}

h1 { font-size: 1.3em; }
h2 { font-size: 1.3em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }

/* === LAYOUT GLOBAL === */
.container {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px;
}

.content {
    flex: 3;
    padding: 10px;
}

.sidebar {
    flex: 1;
    padding: 10px;
}

/* === BLOCS ARTICLES === */
.box {
    background: #ffffff; 
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.box h2 {
    margin-bottom: 5px;
}

/* STRUCTURE IMAGE + TEXTE */
.box-flex {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.box-thumb {
    flex: 0 0 35%; /* image prend environ 1/3 */
}

.box-thumb img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

.box-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.box-content p {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #1c1e21;
}

.box-content a {
    color: #385898;
}

/* === RESPONSIVE === */
@media (max-width: 950px) {
    .container {
        flex-direction: column;
    }

    .sidebar {
        order: 2;
    }

    .content {
        order: 1;
    }

    .box-flex {
        flex-direction: column; /* image en haut, texte en dessous */
    }

    .box-thumb {
        flex: none;
        width: 100%; /* image pleine largeur */
    }
}

/* === FOOTER === */
footer {
    text-align: center;
    padding: 15px;
    font-size: 0.9em;
    color: #3d5d8e;
    margin-top: 20px;
}

/* === PAGINATION === */
.pagination {
    text-align: center;
    margin: 30px 0;
}

.pagination ul {
    list-style: none;
    display: inline-flex;
    padding: 0;
    margin: 0;
}

.pagination li {
    margin: 0 4px;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 8px 14px;
    background-color: #74a4f2;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s;
}

.pagination a:hover {
    background-color: #385898;
}

.pagination .current {
    background-color: #385898;
    color: #fff;
    pointer-events: none;
}

/* === TITRE DU SITE === */
.site-title-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 10px 0 10px;
}

.site-title {
    margin: 0;
    font-size: 2.2em;
    font-weight: bold;
    text-align: left;
}

.site-title a {
    text-decoration: none;
    color: #385898;
}

.site-title .gold {
    color: #3d5d8e;
}

.site-title .gray {
    color: #b0b0b0;
}


/* Contenu article : respecter les styles Gutenberg */
.entry-content .has-text-color { color: inherit; }
.entry-content .has-vivid-red-color { color: #cf2e2e !important; }
.entry-content .has-vivid-green-cyan-color { color: #00d084 !important; }
.entry-content .has-vivid-cyan-blue-color { color: #0693e3 !important; }

.entry-content .has-small-font-size { font-size: .85em !important; }
.entry-content .has-medium-font-size { font-size: 1em !important; }
.entry-content .has-large-font-size { font-size: 1.35em !important; }
.entry-content .has-x-large-font-size { font-size: 1.65em !important; }

.entry-content .has-background { padding: .25em .5em; border-radius: 8px; }


/* --- Gutenberg: Colonnes --- */
.entry-content .wp-block-columns{
  display:flex;
  gap:16px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.entry-content .wp-block-column{
  flex:1 1 0;
  min-width:280px; /* évite le cassage sur petits écrans */
}

/* --- Gutenberg: Galerie / Images côte à côte --- */
.entry-content .wp-block-gallery{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin: 0 0 16px 0;
}
.entry-content .wp-block-gallery .wp-block-image,
.entry-content .wp-block-gallery figure{
  margin:0;
  flex:1 1 calc(50% - 16px); /* 2 colonnes par défaut */
}
.entry-content .wp-block-gallery img{
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
}

/* Sur mobile : 1 colonne */
@media (max-width: 700px){
  .entry-content .wp-block-gallery .wp-block-image,
  .entry-content .wp-block-gallery figure{
    flex:1 1 100%;
  }
}

/* =========================
   Gutenberg compatibility
   ========================= */

/* Zone contenu : largeur propre + centrage */
.entry-content{
  max-width: 100%;
}

/* Images et figures : comportement sain */
.entry-content img{
  max-width: 100%;
  height: auto;
  display: block;
}

.entry-content figure{
  margin: 0 0 16px 0;
}

/* Centrage des images (Gutenberg) */
.entry-content figure.aligncenter,
.entry-content img.aligncenter{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Align left/right */
.entry-content .alignleft{
  float:left;
  margin: 0 16px 16px 0;
}
.entry-content .alignright{
  float:right;
  margin: 0 0 16px 16px;
}
.entry-content .alignnone{
  margin: 0 0 16px 0;
}

/* Clearfix */
.entry-content::after{
  content:"";
  display:block;
  clear:both;
}

/* Couleurs Gutenberg : laisser passer */
.entry-content .has-text-color{ color: inherit; }
.entry-content .has-background{ padding: .25em .5em; border-radius: 8px; }

/* Presets les plus utilisés (fallback si global-styles saute) */
.entry-content .has-vivid-red-color{ color:#cf2e2e !important; }
.entry-content .has-cyan-bluish-gray-color{ color:#abb8c3 !important; } /* gris clair WP */
.entry-content .has-light-gray-color{ color:#f0f0f1 !important; }
.entry-content .has-black-color{ color:#000 !important; }
.entry-content .has-white-color{ color:#fff !important; }

/* Tailles */
.entry-content .has-small-font-size{ font-size: .85em !important; }
.entry-content .has-large-font-size{ font-size: 1.35em !important; }
.entry-content .has-x-large-font-size{ font-size: 1.65em !important; }


/* ==============================
   SOCIAL ICONS – FIX WORDPRESS
   ============================== */

.wp-block-social-links {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;              /* Desktop spacing */
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

/* Icône individuelle */
.wp-block-social-links .wp-social-link {
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
}

/* Lien + SVG */
.wp-block-social-links .wp-social-link a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* ==================================================
   Social Icons : forcer "icônes seules" (sans ronds)
   ================================================== */

/* Supprime la pastille (fond) */
.wp-block-social-links .wp-social-link {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Supprime tout arrondi/padding qui crée l’effet bouton */
.wp-block-social-links .wp-social-link,
.wp-block-social-links .wp-social-link a {
  border-radius: 0 !important;
  background: transparent !important;
}

/* Réduit le padding interne du lien (souvent la source du rond) */
.wp-block-social-links .wp-social-link a {
  padding: 0 !important;
}

/* Taille des icônes (optionnel) */
.wp-block-social-links .wp-social-link a svg {
  width: 22px;
  height: 22px;
}

/* Informaticien Public - Contact Form 7 */
.ip-contact-form {
  max-width: 720px;
}

.ip-contact-form .wpcf7 form {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.ip-contact-form .wpcf7 label {
  display: block;
  font-weight: 600;
  margin: 0 0 6px;
}

.ip-contact-form .wpcf7 input[type="text"],
.ip-contact-form .wpcf7 input[type="email"],
.ip-contact-form .wpcf7 input[type="url"],
.ip-contact-form .wpcf7 input[type="tel"],
.ip-contact-form .wpcf7 textarea,
.ip-contact-form .wpcf7 select {
  width: 100%;
  padding: 12px 12px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 10px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
  outline: none;
  box-sizing: border-box;
}

.ip-contact-form .wpcf7 textarea {
  min-height: 160px;
  resize: vertical;
}

.ip-contact-form .wpcf7 input:focus,
.ip-contact-form .wpcf7 textarea:focus,
.ip-contact-form .wpcf7 select:focus {
  border-color: rgba(59,130,246,.65);
  box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}

.ip-contact-form .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 14px;
}

.ip-contact-form .wpcf7 input[type="submit"] {
  display: inline-block;
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}

.ip-contact-form .wpcf7-spinner {
  margin-left: 10px;
}

.ip-contact-form .wpcf7-not-valid-tip {
  font-size: 13px;
  margin-top: 6px;
}

.ip-contact-form .wpcf7-response-output {
  margin: 16px 0 0;
  border-radius: 10px;
}

/* Vidéo Gutenberg : même comportement qu'une image responsive */
.entry-content .wp-block-video,
.entry-content .wp-block-video video {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Empêche les débordements dans les thèmes qui ont des conteneurs étroits */
.entry-content .wp-block-video {
  overflow: hidden;
}

/* Optionnel : rendu plus propre (comme une image) */
.entry-content .wp-block-video video {
  border-radius: 8px;
}