/* =========================================================================
   GA Blog — gabarit des articles GlassAuto-Arles
   Charte : noir #2e2d2c · cyan #009cb4 · rouge #de0044 · Dunbar Tall
   Tout est préfixé par body.ga-blog : le kit Elementor et le reset du thème
   Hello stylent déjà h1-h6, a et table avec une spécificité équivalente.
   ========================================================================= */

@font-face{font-family:'Dunbar Tall';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/dunbar-tall-700.woff2) format('woff2');}
@font-face{font-family:'Dunbar Tall';font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/dunbar-tall-800.woff2) format('woff2');}

:root{
  --ga-cyan:#009cb4; --ga-cyan-d:#007f93; --ga-cyan-l:#48c6da;
  --ga-red:#de0044;  --ga-ink:#2e2d2c;    --ga-mute:#6b6862;
  --ga-line:#e3e2db; --ga-cream:#faf9f5;  --ga-cyan-soft:#e6f6f9; --ga-red-soft:#fdecf1;
  --ga-disp:'Dunbar Tall',system-ui,sans-serif;
  --ga-body:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* Le thème ne doit plus afficher son propre titre ni contraindre la largeur */
body.ga-blog .page-header{display:none;}
body.ga-blog .site-main{max-width:none;padding:0;margin:0;}

body.ga-blog .ga-art{font-family:var(--ga-body);color:var(--ga-ink);background:#fff;}
body.ga-blog .ga-art *{box-sizing:border-box;}
body.ga-blog .ga-wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ---------- En-tête ---------- */
body.ga-blog .ga-art-hero{background:var(--ga-cream);border-bottom:1px solid var(--ga-line);padding:56px 0 108px;}
body.ga-blog .ga-crumb{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;font-size:14px;color:var(--ga-mute);}
body.ga-blog .ga-crumb a{color:var(--ga-mute);text-decoration:none;font-weight:400;}
body.ga-blog .ga-crumb a:hover{color:var(--ga-cyan);}
body.ga-blog .ga-kicker{display:block;margin:0 0 10px;font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ga-red);}
/* Titre et chapô occupent toute la largeur du conteneur (demande client) */
body.ga-blog .ga-art-title{margin:0 0 18px;font-family:var(--ga-disp);font-weight:800;
  font-size:clamp(32px,4.6vw,52px);line-height:1.04;color:var(--ga-cyan);text-transform:none;text-wrap:balance;}
body.ga-blog .ga-art-lead{margin:0 0 26px;font-size:21px;line-height:1.55;color:#4a4845;text-wrap:pretty;}
body.ga-blog .ga-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin:0;padding:0;
  list-style:none;font-size:15px;color:var(--ga-mute);}
body.ga-blog .ga-meta li{display:flex;align-items:center;gap:8px;margin:0;padding:0;}
body.ga-blog .ga-meta li::before{content:none;}
body.ga-blog .ga-meta svg{flex:none;width:18px;height:18px;color:var(--ga-cyan);}

/* ---------- Image à la une ---------- */
body.ga-blog .ga-art-cover{margin:-70px 0 52px;}
body.ga-blog .ga-art-cover img{display:block;width:100%;height:clamp(240px,34vw,400px);object-fit:cover;
  border-radius:20px;box-shadow:0 18px 40px rgba(46,45,44,.16);}

/* ---------- Mise en page : sommaire en bandeau, texte pleine largeur ---------- */
body.ga-blog .ga-art-main{max-width:none;}

/* Sommaire horizontal, en tête d'article : libellés courts, numérotés dans l'ordre de lecture */
body.ga-blog .ga-toc-top{margin:0 0 46px;padding:24px 28px;background:var(--ga-cream);
  border:1px solid var(--ga-line);border-radius:16px;}
body.ga-blog .ga-toc-t{margin:0 0 14px;font-family:var(--ga-body);font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ga-red);}
body.ga-blog .ga-toc-top ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:2px 30px;margin:0;padding:0;list-style:none;counter-reset:ga-som;}
body.ga-blog .ga-toc-top li{margin:0;padding:0;counter-increment:ga-som;}
body.ga-blog .ga-toc-top li::before{content:none;}
body.ga-blog .ga-toc-top a{display:flex;align-items:baseline;gap:10px;padding:7px 0;font-size:16px;
  line-height:1.35;font-weight:400;color:var(--ga-ink);text-decoration:none;
  transition:color .15s;}
body.ga-blog .ga-toc-top a > span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
body.ga-blog .ga-toc-top a::before{content:counter(ga-som,decimal-leading-zero);flex:none;
  font-size:12.5px;font-weight:700;color:var(--ga-cyan);letter-spacing:.04em;}
body.ga-blog .ga-toc-top a:hover{color:var(--ga-cyan);}


/* Sommaire mobile : même contenu, replié dans un accordéon */
body.ga-blog .ga-toc-mob{display:none;margin:0 0 38px;background:var(--ga-cream);
  border:1px solid var(--ga-line);border-radius:14px;}
body.ga-blog .ga-toc-mob summary{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;list-style:none;cursor:pointer;font-family:var(--ga-body);font-weight:700;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ga-red);}
body.ga-blog .ga-toc-mob summary::-webkit-details-marker{display:none;}
body.ga-blog .ga-toc-mob summary::after{content:"+";font-size:26px;line-height:1;letter-spacing:0;color:var(--ga-cyan);}
body.ga-blog .ga-toc-mob[open] summary::after{content:"‘2";}
body.ga-blog .ga-toc-mob ol{margin:0;padding:0 20px 16px;list-style:none;counter-reset:ga-som-m;}
body.ga-blog .ga-toc-mob li{margin:0;padding:0;counter-increment:ga-som-m;}
body.ga-blog .ga-toc-mob li::before{content:none;}
body.ga-blog .ga-toc-mob a{display:flex;align-items:baseline;gap:10px;padding:7px 0;font-size:16px;
  line-height:1.35;font-weight:400;color:var(--ga-ink);text-decoration:none;}
body.ga-blog .ga-toc-mob a > span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
body.ga-blog .ga-toc-mob a::before{content:counter(ga-som-m,decimal-leading-zero);flex:none;
  font-size:12.5px;font-weight:700;color:var(--ga-cyan);}

/* ---------- Corps de texte ---------- */
body.ga-blog .ga-art-body{font-size:20px;line-height:1.75;color:var(--ga-ink);}
body.ga-blog .ga-art-body > *{margin-top:0;margin-bottom:22px;}
/* Justifié + césure : décision client, voir la mémoire projet */
body.ga-blog .ga-art-body p{text-align:justify;hyphens:auto;-webkit-hyphens:auto;}
body.ga-blog .ga-art-body > p:first-child{font-size:22px;line-height:1.65;color:#3a3937;}
body.ga-blog .ga-art-body h2{margin:52px 0 18px;border-top:1px solid var(--ga-line);padding-top:38px;font-family:var(--ga-disp);font-weight:800;font-size:32px;line-height:1.12;
  color:var(--ga-cyan);text-transform:none;text-wrap:balance;scroll-margin-top:28px;}
body.ga-blog .ga-art-body > h2:first-child{margin-top:0;border-top:0;padding-top:0;}
body.ga-blog .ga-art-body h3{margin:36px 0 12px;font-family:var(--ga-disp);font-weight:700;font-size:23px;line-height:1.2;
  color:var(--ga-ink);text-transform:none;text-wrap:balance;}
body.ga-blog .ga-art-body a{color:var(--ga-red);font-weight:700;text-decoration:none;}
body.ga-blog .ga-art-body a:hover{text-decoration:underline;text-underline-offset:3px;}
body.ga-blog .ga-art-body strong,body.ga-blog .ga-art-body b{font-weight:700;color:var(--ga-ink);}

/* Listes : pastille cyan */
body.ga-blog .ga-art-body ul,body.ga-blog .ga-art-body ol{margin-left:0;padding-left:0;}
body.ga-blog .ga-art-body ul{list-style:none;}
body.ga-blog .ga-art-body ol{padding-left:26px;}
body.ga-blog .ga-art-body li{margin:0 0 10px;}
body.ga-blog .ga-art-body ul > li{position:relative;padding-left:26px;}
body.ga-blog .ga-art-body ul > li::before{content:"";position:absolute;left:4px;top:.66em;width:8px;height:8px;
  border-radius:50%;background:var(--ga-cyan);}

/* Images, citations */
body.ga-blog .ga-art-body .wp-block-image img{height:auto;border-radius:16px;}
body.ga-blog .ga-art-body figcaption{margin-top:8px;font-size:14px;color:var(--ga-mute);text-align:center;}
body.ga-blog .ga-art-body .wp-block-quote{position:relative;margin:36px 0;padding:0 0 0 32px;border:0;}
body.ga-blog .ga-art-body .wp-block-quote::before{content:"\201C";position:absolute;left:-4px;top:-20px;
  font-family:var(--ga-disp);font-size:76px;line-height:1;color:var(--ga-cyan);}
body.ga-blog .ga-art-body .wp-block-quote p{font-family:var(--ga-disp);font-weight:700;font-size:24px;line-height:1.3;text-align:left;}
body.ga-blog .ga-art-body .wp-block-quote cite{font-size:15px;font-style:normal;color:var(--ga-mute);}

/* Tableaux : repris des pages de service (arrondi 18px, en-tête cyan) */
body.ga-blog .ga-art-body .wp-block-table{margin:28px 0;overflow-x:auto;border:1px solid var(--ga-line);border-radius:18px;}
body.ga-blog .ga-art-body .wp-block-table table{width:100%;margin:0;border:0;border-collapse:collapse;font-size:16.5px;line-height:1.45;}
body.ga-blog .ga-art-body .wp-block-table thead{border:0;}
body.ga-blog .ga-art-body .wp-block-table th{padding:14px 18px;border:0;background:var(--ga-cyan);color:#fff;
  font-family:var(--ga-disp);font-weight:700;font-size:17px;text-align:left;}
body.ga-blog .ga-art-body .wp-block-table td{padding:13px 18px;border:0;border-top:1px solid var(--ga-line);
  background:#fff;text-align:left;vertical-align:top;}
body.ga-blog .ga-art-body .wp-block-table tbody tr:nth-child(even) td{background:var(--ga-cream);}
body.ga-blog .ga-art-body .wp-block-table td:first-child{font-weight:600;}

/* FAQ : accordéons, bordure qui passe au cyan à l'ouverture */
body.ga-blog .ga-art-body .wp-block-details{margin:0 0 12px;padding:0;overflow:hidden;background:#fff;
  border:1px solid var(--ga-line);border-radius:14px;transition:border-color .2s;}
body.ga-blog .ga-art-body .wp-block-details[open]{border-color:var(--ga-cyan);}
body.ga-blog .ga-art-body .wp-block-details summary{display:block;position:relative;padding:18px 58px 18px 22px;
  list-style:none;cursor:pointer;font-family:var(--ga-disp);font-weight:700;font-size:19px;line-height:1.3;color:var(--ga-ink);}
body.ga-blog .ga-art-body .wp-block-details summary::-webkit-details-marker{display:none;}
body.ga-blog .ga-art-body .wp-block-details summary::after{content:"+";position:absolute;right:22px;top:50%;
  transform:translateY(-50%);font-family:var(--ga-body);font-weight:400;font-size:28px;line-height:1;color:var(--ga-cyan);}
body.ga-blog .ga-art-body .wp-block-details[open] summary::after{content:"\2212";}
body.ga-blog .ga-art-body .wp-block-details > :not(summary){margin:0 22px 18px;}
body.ga-blog .ga-art-body .wp-block-details p{font-size:17.5px;}

/* ---------- Encadrés (styles de blocs) ----------
   Sélecteurs sans préfixe body : ils servent aussi dans l'éditeur. */
.wp-block-group.is-style-ga-retenir,
.wp-block-group.is-style-ga-attention,
.wp-block-group.is-style-ga-conseil{margin:32px 0;padding:22px 26px;border-radius:0 14px 14px 0;}
.wp-block-group.is-style-ga-retenir{background:var(--ga-cyan-soft);border-left:5px solid var(--ga-cyan);}
.wp-block-group.is-style-ga-attention{background:var(--ga-red-soft);border-left:5px solid var(--ga-red);}
.wp-block-group.is-style-ga-conseil{background:var(--ga-ink);border-left:0;border-radius:16px;}
.wp-block-group.is-style-ga-retenir::before,
.wp-block-group.is-style-ga-attention::before,
.wp-block-group.is-style-ga-conseil::before{display:block;margin:0 0 6px;font-family:var(--ga-disp);font-weight:700;font-size:19px;line-height:1.2;}
.wp-block-group.is-style-ga-retenir::before{content:"À retenir";color:var(--ga-cyan);}
.wp-block-group.is-style-ga-attention::before{content:"Attention";color:var(--ga-red);}
.wp-block-group.is-style-ga-conseil::before{content:"Conseil de pro";color:var(--ga-cyan-l);}
/* Thème classique : WordPress ajoute .wp-block-group__inner-container autour du contenu */
.wp-block-group[class*="is-style-ga-"] p{margin:0 0 14px;}
.wp-block-group[class*="is-style-ga-"] > *,
.wp-block-group[class*="is-style-ga-"] .wp-block-group__inner-container > *{margin-top:0;}
.wp-block-group[class*="is-style-ga-"] > :last-child,
.wp-block-group[class*="is-style-ga-"] .wp-block-group__inner-container > :last-child{margin-bottom:0;}
body.ga-blog .ga-art-body .is-style-ga-conseil p,
body.ga-blog .ga-art-body .is-style-ga-conseil li,
.wp-block-group.is-style-ga-conseil p,.wp-block-group.is-style-ga-conseil li{color:#fff;}
body.ga-blog .ga-art-body .is-style-ga-conseil strong{color:#fff;}
body.ga-blog .ga-art-body .is-style-ga-conseil a{color:#7fd9e8;}

/* Liste à coches */
body.ga-blog .ga-art-body ul.is-style-ga-coches > li,
ul.wp-block-list.is-style-ga-coches > li{position:relative;padding-left:38px;margin:0 0 12px;list-style:none;}
body.ga-blog .ga-art-body ul.is-style-ga-coches > li::before,
ul.wp-block-list.is-style-ga-coches > li::before{content:"";position:absolute;left:0;top:.2em;width:24px;height:24px;
  border-radius:50%;background:var(--ga-cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;}
ul.wp-block-list.is-style-ga-coches{padding-left:0;list-style:none;}

/* Chiffre clé : à poser sur un paragraphe court, le nombre en gras */
body.ga-blog .ga-art-body p.is-style-ga-chiffre,
.editor-styles-wrapper p.is-style-ga-chiffre{margin:34px 0;padding:24px 28px;background:var(--ga-ink);
  border-radius:16px;color:#fff;font-family:var(--ga-disp);font-weight:800;font-size:26px;line-height:1.2;
  text-align:left;hyphens:none;}
body.ga-blog .ga-art-body p.is-style-ga-chiffre strong,
.editor-styles-wrapper p.is-style-ga-chiffre strong{display:block;color:var(--ga-cyan-l);font-size:46px;line-height:1;}

/* ---------- Appel à l'action ---------- */
body.ga-blog .ga-art-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;
  margin:72px 0 0;padding:40px 44px;background:var(--ga-ink);border-radius:22px;color:#fff;}
body.ga-blog .ga-cta-k{display:block;margin:0 0 8px;font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ga-cyan-l);}
body.ga-blog .ga-cta-t{margin:0 0 8px;font-family:var(--ga-disp);font-weight:800;font-size:30px;line-height:1.1;color:#fff;}
body.ga-blog .ga-cta-p{max-width:54ch;margin:0;font-size:17px;line-height:1.55;color:rgba(255,255,255,.86);}
body.ga-blog .ga-art-cta > div:first-child{flex:1 1 420px;}
body.ga-blog .ga-cta-btns{display:flex;flex:0 0 auto;flex-wrap:wrap;gap:12px;}
body.ga-blog .ga-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 26px;
  border-radius:12px;font-family:var(--ga-disp);font-weight:700;font-size:18px;line-height:1.15;text-decoration:none;
  transition:transform .15s,background .15s,border-color .15s;}
body.ga-blog .ga-btn svg{width:20px;height:20px;flex:none;}
body.ga-blog .ga-btn:hover{transform:translateY(-1px);}
body.ga-blog .ga-btn-c{background:var(--ga-cyan);color:#fff;border:2px solid var(--ga-cyan);}
body.ga-blog .ga-btn-c:hover{background:var(--ga-cyan-d);border-color:var(--ga-cyan-d);color:#fff;}
body.ga-blog .ga-btn-o{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55);}
body.ga-blog .ga-btn-o:hover{border-color:#fff;color:#fff;}

/* ---------- Articles liés ---------- */
body.ga-blog .ga-related{padding:64px 0 84px;}
body.ga-blog .ga-related-t{margin:0 0 24px;font-family:var(--ga-disp);font-weight:800;font-size:28px;line-height:1.15;color:var(--ga-ink);text-transform:none;}
body.ga-blog .ga-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px;}
body.ga-blog .ga-card{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--ga-line);
  border-radius:16px;color:var(--ga-ink);text-decoration:none;transition:border-color .2s,transform .2s;}
body.ga-blog .ga-card:hover{border-color:var(--ga-cyan);transform:translateY(-2px);}
body.ga-blog .ga-card img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;}
body.ga-blog .ga-card-b{display:flex;flex:1;flex-direction:column;gap:10px;padding:18px 20px 20px;}
body.ga-blog .ga-card-t{font-family:var(--ga-disp);font-weight:700;font-size:20px;line-height:1.2;}
body.ga-blog .ga-card-m{margin-top:auto;font-size:14px;color:var(--ga-mute);}

/* ---------- Barre de progression de lecture ---------- */
body.ga-blog .ga-progress{position:fixed;top:0;left:0;right:0;z-index:9999;height:3px;pointer-events:none;}
body.admin-bar.ga-blog .ga-progress{top:32px;}
body.ga-blog .ga-progress span{display:block;height:100%;background:var(--ga-cyan);transform:scaleX(0);transform-origin:0 50%;}

/* ---------- Accessibilité ---------- */
body.ga-blog .ga-art a:focus-visible,body.ga-blog .ga-art summary:focus-visible{outline:3px solid var(--ga-cyan);outline-offset:3px;border-radius:6px;}
@media (prefers-reduced-motion:no-preference){html:has(body.ga-blog){scroll-behavior:smooth;}}
@media (prefers-reduced-motion:reduce){body.ga-blog .ga-card,body.ga-blog .ga-btn,body.ga-blog .ga-toc-desk a{transition:none;}}

/* ---------- Tablette / mobile ---------- */
@media (max-width:1023px){
  body.ga-blog .ga-toc-top a,body.ga-blog .ga-toc-mob a{font-size:15.5px;}
  body.ga-blog .ga-toc-top ol{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
}
@media (max-width:767px){
  body.ga-blog .ga-toc-top{display:none;}
  body.ga-blog .ga-toc-mob{display:block;}
}
@media (max-width:782px){body.admin-bar.ga-blog .ga-progress{top:46px;}}
@media (max-width:620px){
  body.ga-blog .ga-wrap{padding:0 18px;}
  body.ga-blog .ga-art-hero{padding:34px 0 72px;}
  body.ga-blog .ga-art-lead{font-size:18px;}
  body.ga-blog .ga-art-cover{margin:-48px 0 34px;}
  body.ga-blog .ga-art-cover img{border-radius:14px;}
  body.ga-blog .ga-art-body{font-size:17px;}
  body.ga-blog .ga-art-body > p:first-child{font-size:18.5px;}
  body.ga-blog .ga-art-body p.is-style-ga-chiffre{font-size:21px;padding:20px 22px;}
  body.ga-blog .ga-art-body p.is-style-ga-chiffre strong{font-size:38px;}
  body.ga-blog .ga-art-body h2{margin-top:42px;padding-top:30px;font-size:26px;}
  body.ga-blog .ga-art-body h3{font-size:20px;}
  body.ga-blog .ga-art-body .wp-block-table table{font-size:15px;}
  .wp-block-group.is-style-ga-retenir,.wp-block-group.is-style-ga-attention,.wp-block-group.is-style-ga-conseil{padding:18px 20px;}
  body.ga-blog .ga-art-cta{padding:30px 22px;border-radius:18px;}
  body.ga-blog .ga-cta-t{font-size:25px;}
  body.ga-blog .ga-cta-btns,body.ga-blog .ga-btn{width:100%;}
}