/*
Theme Name: Scribellen
Template: astra
Author: Scribellen
Description: Habillage editorial encre & papier pour Scribellen.
Version: 1.0
*/

/* ============ Fondations ============ */
:root{
  --papier:#f4eddf;
  --papier-clair:#fbf7ee;
  --papier-fonce:#ece2cf;
  --encre:#211d18;
  --encre-douce:#5d554a;
  --vermillon:#c8472e;
  --vermillon-sombre:#9d3520;
  --ocre:#b08326;
  --filet:rgba(33,29,24,.16);
  --voile:rgba(33,29,24,.045);
  --titre:"Fraunces",Georgia,"Times New Roman",serif;
  --texte:"Newsreader",Georgia,serif;
  --mesure:39rem;
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background-color:var(--papier);
  color:var(--encre);
  font-family:var(--texte);
  font-size:1.16rem;
  line-height:1.72;
  font-weight:380;
  -webkit-font-smoothing:antialiased;
}

/* grain papier discret */
body::before{
  content:"";
  position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}
#page,.site-content{position:relative;z-index:1}

h1,h2,h3,h4{font-family:var(--titre);color:var(--encre);font-weight:560;line-height:1.08;letter-spacing:-.01em}
a{color:var(--encre);text-decoration:none}
::selection{background:var(--vermillon);color:var(--papier-clair)}

/* lien encre souligne au survol */
.entry-content a:not(.feuillet):not(.bouton),
.colophon a{
  background-image:linear-gradient(var(--vermillon),var(--vermillon));
  background-size:0% 1.5px;background-position:0 92%;background-repeat:no-repeat;
  transition:background-size .28s ease;color:var(--encre)
}
.entry-content a:hover,.colophon a:hover{background-size:100% 1.5px;color:var(--vermillon-sombre)}

/* ============ En-tete Astra reskin ============ */
.site-header,.ast-primary-header-bar,header.site-header .ast-above-header-bar{
  background:transparent!important;border:0!important;box-shadow:none!important
}
.ast-primary-header-bar{border-bottom:1px solid var(--filet)!important}
.site-title{font-family:var(--titre)!important;font-weight:600!important}
.site-title a{color:var(--encre)!important;letter-spacing:-.02em;font-size:1.7rem}
.site-title a:hover{color:var(--vermillon)!important}
.ast-builder-menu .main-header-menu a,.main-navigation a{
  font-family:var(--texte)!important;font-size:.82rem!important;
  text-transform:uppercase;letter-spacing:.14em;color:var(--encre)!important;font-weight:500
}
.main-header-menu a:hover,.menu-item.current-menu-item>a{color:var(--vermillon)!important}

/* ============ Bandeau (hero) ============ */
.bandeau{
  padding:clamp(3.2rem,8vw,7rem) 0 clamp(2.4rem,5vw,4rem);
  position:relative;overflow:hidden
}
.bandeau::after{ /* halo encre chaud */
  content:"";position:absolute;z-index:-1;
  width:60vw;height:60vw;max-width:760px;max-height:760px;
  right:-14vw;top:-22vw;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(200,71,46,.16),rgba(176,131,38,.07) 45%,transparent 68%);
  filter:blur(8px)
}
.bandeau .surtitre{
  font-family:var(--texte);font-style:italic;font-size:1.05rem;
  color:var(--vermillon-sombre);margin:0 0 .9rem
}
.bandeau h1{
  font-size:clamp(2.7rem,7.2vw,5.6rem);font-weight:600;
  letter-spacing:-.025em;margin:0 0 1.3rem;max-width:16ch
}
.bandeau h1 em{font-style:italic;color:var(--vermillon)}
.bandeau .chapeau{
  font-size:clamp(1.15rem,2vw,1.42rem);max-width:46ch;color:var(--encre-douce);
  line-height:1.55;margin:0
}
.filet-orne{display:flex;align-items:center;gap:1rem;margin:2.6rem 0 0;color:var(--vermillon)}
.filet-orne::before,.filet-orne::after{content:"";height:1px;background:var(--filet);flex:1}
.filet-orne span{font-family:var(--titre);font-style:italic;font-size:1rem;color:var(--encre-douce)}

/* ============ Grilles d'articles ============ */
.rayon{padding:clamp(2.4rem,5vw,4rem) 0;border-top:1px solid var(--filet)}
.rayon-tete{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 2rem;flex-wrap:wrap}
.rayon-tete h2{font-size:clamp(1.6rem,3vw,2.3rem)}
.rayon-tete .compteur{font-family:var(--texte);font-style:italic;color:var(--encre-douce)}

.planche{
  display:grid;gap:clamp(1.4rem,3vw,2.4rem);
  grid-template-columns:repeat(auto-fill,minmax(265px,1fr))
}
.feuillet{
  display:flex;flex-direction:column;background:var(--papier-clair);
  border:1px solid var(--filet);border-radius:3px;overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s;
  position:relative
}
.feuillet:hover{transform:translateY(-6px);box-shadow:0 22px 40px -26px rgba(33,29,24,.55);border-color:rgba(200,71,46,.5)}
.feuillet .vignette{
  aspect-ratio:16/10;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--papier-fonce),var(--papier-clair))
}
.feuillet .vignette .initiale{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--titre);font-weight:600;font-size:5.5rem;color:rgba(200,71,46,.22);
  transition:transform .5s ease,color .35s
}
.feuillet:hover .initiale{transform:scale(1.12) rotate(-3deg);color:rgba(200,71,46,.32)}
.feuillet .dedans{padding:1.35rem 1.45rem 1.6rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.rubrique{
  font-family:var(--texte);text-transform:uppercase;letter-spacing:.16em;
  font-size:.7rem;font-weight:600;color:var(--vermillon-sombre)
}
.feuillet h3{font-size:1.32rem;line-height:1.2;font-weight:560}
.feuillet h3 a:hover{color:var(--vermillon)}
.feuillet p{margin:0;font-size:.98rem;color:var(--encre-douce);line-height:1.55}
.feuillet .pied{margin-top:auto;display:flex;gap:.8rem;align-items:center;font-size:.8rem;color:var(--encre-douce);font-style:italic;padding-top:.4rem}
.feuillet .pied .point{width:4px;height:4px;border-radius:50%;background:var(--ocre)}

/* article a la une, format large */
.feuillet--une{grid-column:span 2;flex-direction:row}
.feuillet--une .vignette{flex:0 0 46%;aspect-ratio:auto}
.feuillet--une .vignette .initiale{font-size:9rem}
.feuillet--une .dedans{justify-content:center;padding:2rem 2.2rem}
.feuillet--une h3{font-size:1.85rem}
@media(max-width:880px){.feuillet--une{grid-column:span 1;flex-direction:column}.feuillet--une .vignette{flex:auto;aspect-ratio:16/10}}

/* ============ Article (single) ============ */
.ast-article-single{background:transparent;border:0;box-shadow:none}
.single .entry-header,.single .entry-title{text-align:left}
.single .entry-title{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:20ch;margin:0 0 1rem;letter-spacing:-.02em}
.single .entry-content{font-size:1.2rem;line-height:1.82;max-width:var(--mesure);margin-inline:auto}
.single .entry-content>p:first-of-type::first-letter{
  font-family:var(--titre);float:left;font-size:4.2rem;line-height:.74;
  padding:.32rem .5rem 0 0;color:var(--vermillon);font-weight:600
}
.entry-content h2{font-size:1.85rem;margin:2.6rem 0 .9rem;position:relative;padding-top:1.3rem}
.entry-content h2::before{content:"";position:absolute;top:0;left:0;width:2.4rem;height:3px;background:var(--vermillon);border-radius:2px}
.entry-content h3{font-size:1.4rem;margin:1.9rem 0 .6rem;color:var(--vermillon-sombre)}
.entry-content ul,.entry-content ol{padding-left:1.3rem}
.entry-content li{margin:.45rem 0}
.entry-content ul li::marker{color:var(--vermillon)}
.entry-content blockquote{
  border-left:3px solid var(--vermillon);margin:2rem 0;padding:.4rem 0 .4rem 1.4rem;
  font-family:var(--titre);font-style:italic;font-size:1.4rem;color:var(--encre)
}
.entry-content strong{font-weight:620}

/* meta / temps de lecture */
.ours{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;color:var(--encre-douce);
  font-style:italic;font-size:.95rem;margin:0 0 2rem;max-width:var(--mesure);margin-inline:auto}
.ours .sceau{
  display:inline-flex;align-items:center;gap:.4rem;font-style:normal;
  font-family:var(--texte);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;
  font-weight:600;color:var(--vermillon-sombre)
}

/* jauge de lecture */
.jauge-lecture{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--vermillon),var(--ocre));transition:width .1s linear}

/* a lire ensuite */
.a-lire-ensuite{max-width:980px;margin:3.5rem auto 0;padding-top:2.4rem;border-top:1px solid var(--filet)}
.a-lire-ensuite>.titre{font-family:var(--titre);font-style:italic;font-size:1.5rem;margin:0 0 1.6rem;color:var(--encre)}

/* ============ Pied (colophon) ============ */
.colophon-mot{
  margin-top:4rem;padding:3rem 0;border-top:3px double var(--filet);
  text-align:center;font-family:var(--titre);font-style:italic;
  font-size:clamp(1.3rem,3vw,1.9rem);color:var(--encre);line-height:1.4
}
.colophon-mot .point-final{color:var(--vermillon)}
footer.site-footer,.ast-small-footer{background:var(--papier-fonce)!important;color:var(--encre-douce)!important;border-top:1px solid var(--filet)}
footer.site-footer a{color:var(--encre)!important}

/* ============ Animations ============ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

.parait{animation:parait .9s both}
@keyframes parait{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* boutons */
.bouton{
  display:inline-flex;align-items:center;gap:.55rem;font-family:var(--texte);
  text-transform:uppercase;letter-spacing:.13em;font-size:.78rem;font-weight:600;
  padding:.85rem 1.5rem;border:1px solid var(--encre);border-radius:2px;color:var(--encre);
  background:transparent;transition:all .3s ease;cursor:pointer
}
.bouton:hover{background:var(--encre);color:var(--papier-clair)}
.bouton--vermillon{background:var(--vermillon);border-color:var(--vermillon);color:var(--papier-clair)}
.bouton--vermillon:hover{background:var(--vermillon-sombre);border-color:var(--vermillon-sombre)}
.bouton .fleche{transition:transform .3s ease}
.bouton:hover .fleche{transform:translateX(4px)}

/* ======================= v2 : header, footer, images, contact ======================= */

/* on masque l'en-tete & le pied Astra : on fournit les notres */
header.site-header,.site-header,#masthead{display:none!important}
footer.site-footer,.site-footer,.ast-small-footer{display:none!important}

/* ---- En-tete ---- */
.entete{position:sticky;top:0;z-index:200;background:rgba(244,237,223,.86);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);border-bottom:1px solid var(--filet)}
.admin-bar .entete{top:32px}
@media(max-width:782px){.admin-bar .entete{top:46px}}
.entete-dedans{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.95rem 0}
.marque{font-family:var(--titre);font-weight:600;font-size:1.6rem;letter-spacing:-.025em;color:var(--encre);line-height:1}
.marque .pt{color:var(--vermillon)}
a.marque:hover{color:var(--encre)}
.navigation{display:flex;align-items:center;gap:1.7rem;flex-wrap:wrap}
.navigation a{font-family:var(--texte);font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;
  font-weight:600;color:var(--encre);position:relative;padding:.2rem 0}
.navigation a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1.5px;background:var(--vermillon);transition:width .28s ease}
.navigation a:hover{color:var(--vermillon-sombre)}
.navigation a:hover::after{width:100%}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:26px;height:2px;background:var(--encre);transition:.3s}
.entete.ouvert .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.entete.ouvert .burger span:nth-child(2){opacity:0}
.entete.ouvert .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:860px){
  .burger{display:flex}
  .navigation{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--papier-clair);border-bottom:1px solid var(--filet);padding:0 1.2rem;
    max-height:0;overflow:hidden;transition:max-height .35s ease}
  .entete.ouvert .navigation{max-height:70vh;padding:.6rem 1.2rem 1.2rem}
  .navigation a{padding:.7rem 0;width:100%;border-bottom:1px solid var(--voile);font-size:.95rem}
}

/* ---- Bandeau en 2 colonnes + illustration ---- */
@media(min-width:980px){
  .bandeau{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:2rem}
  .bandeau .filet-orne{grid-column:1/-1}
}
.bandeau::after{display:none} /* remplace le halo par une vraie illustration */
.bandeau-art{position:relative;justify-self:center;width:100%;max-width:420px}
.bandeau-art svg{width:100%;height:auto;display:block;animation:flotte 7s ease-in-out infinite}
@keyframes flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(prefers-reduced-motion:reduce){.bandeau-art svg{animation:none}}
@media(max-width:979px){.bandeau-art{max-width:280px;margin-top:2rem;opacity:.92}}

/* ---- Vignettes illustrees par rubrique ---- */
.feuillet .vignette{position:relative}
.feuillet .vignette::before{content:"";position:absolute;right:0;bottom:0;width:62%;height:74%;
  background-repeat:no-repeat;background-position:right bottom;background-size:contain;opacity:.55;transition:transform .5s ease}
.feuillet:hover .vignette::before{transform:translate(-4px,-4px) scale(1.04)}
.feuillet .initiale{z-index:1}

.vignette--seo-referencement{background:linear-gradient(135deg,#f8e8e2,#efd6cc)}
.vignette--seo-referencement::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23c8472e' stroke-width='9' stroke-linecap='round' opacity='.85'%3E%3Cline x1='30' y1='140' x2='30' y2='110'/%3E%3Cline x1='70' y1='140' x2='70' y2='80'/%3E%3Cline x1='110' y1='140' x2='110' y2='45'/%3E%3C/g%3E%3Cpath d='M20 95 L70 60 L110 75 L150 25' fill='none' stroke='%239d3520' stroke-width='5' stroke-linejoin='round'/%3E%3Ccircle cx='150' cy='25' r='8' fill='%239d3520'/%3E%3C/svg%3E")}

.vignette--redaction-web{background:linear-gradient(135deg,#f3ece0,#e6dcc6)}
.vignette--redaction-web::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg stroke='%23211d18' stroke-width='5' stroke-linecap='round' opacity='.6'%3E%3Cline x1='30' y1='60' x2='140' y2='60'/%3E%3Cline x1='30' y1='85' x2='140' y2='85'/%3E%3Cline x1='30' y1='110' x2='110' y2='110'/%3E%3C/g%3E%3Cpath d='M118 118 l26 -26 14 14 -26 26 -18 4z' fill='%23c8472e'/%3E%3C/svg%3E")}

.vignette--marketing-digital{background:linear-gradient(135deg,#f7edd9,#edddbd)}
.vignette--marketing-digital::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23b08326' stroke-width='5' opacity='.8'%3E%3Ccircle cx='110' cy='95' r='18'/%3E%3Ccircle cx='110' cy='95' r='34'/%3E%3Ccircle cx='110' cy='95' r='50'/%3E%3C/g%3E%3Ccircle cx='110' cy='95' r='7' fill='%23c8472e'/%3E%3C/svg%3E")}

.vignette--creation-site-wordpress{background:linear-gradient(135deg,#eae6dd,#dad3c4)}
.vignette--creation-site-wordpress::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23211d18' stroke-width='4' opacity='.55'%3E%3Crect x='40' y='45' width='100' height='80' rx='4'/%3E%3Cline x1='40' y1='65' x2='140' y2='65'/%3E%3Ccircle cx='52' cy='55' r='3' fill='%23c8472e' stroke='none'/%3E%3Cline x1='55' y1='85' x2='95' y2='85'/%3E%3Cline x1='55' y1='100' x2='115' y2='100'/%3E%3C/g%3E%3C/svg%3E")}

.vignette--business-en-ligne{background:linear-gradient(135deg,#f6e7dd,#ecd5be)}
.vignette--business-en-ligne::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M30 120 L70 90 L95 105 L140 55' fill='none' stroke='%23c8472e' stroke-width='6' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M118 52 l24 0 0 24' fill='none' stroke='%23c8472e' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='70' cy='90' r='6' fill='%239d3520'/%3E%3C/svg%3E")}

/* ---- Pied (colophon) ---- */
.colophon{background:var(--encre);color:#cdbfa8;margin-top:4rem;padding:3.4rem 0 0}
.colophon .marque{color:var(--papier-clair)}
.colophon-grille{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.4rem;padding-bottom:2.8rem}
.colophon-marque p{margin:.9rem 0 0;max-width:38ch;color:#a99c87;font-size:1rem;line-height:1.6}
.colophon-titre{font-family:var(--texte);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;
  font-weight:600;color:var(--vermillon);margin:0 0 1rem}
.colophon-col{display:flex;flex-direction:column;gap:.6rem}
.colophon-col a{color:#cdbfa8;font-size:.98rem;transition:color .25s}
.colophon-col a:hover{color:var(--papier-clair)}
.colophon-bas{border-top:1px solid rgba(255,255,255,.1);padding:1.3rem 0;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:.6rem;font-size:.85rem;color:#8c8071;font-style:italic;max-width:1200px;margin:0 auto;width:100%}
.ast-container .colophon-bas{padding-left:0;padding-right:0}
@media(max-width:760px){.colophon-grille{grid-template-columns:1fr;gap:1.8rem}}

/* ---- Formulaire de contact ---- */
.form-contact{max-width:600px;margin:1.5rem 0 0;display:flex;flex-direction:column;gap:1.1rem}
.form-duo{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:600px){.form-duo{grid-template-columns:1fr}}
.form-contact label{display:flex;flex-direction:column;gap:.4rem;font-family:var(--texte);font-size:.78rem;
  text-transform:uppercase;letter-spacing:.1em;font-weight:600;color:var(--encre-douce)}
.form-contact input,.form-contact textarea{font-family:var(--texte);font-size:1.05rem;padding:.75rem .9rem;
  background:var(--papier-clair);border:1px solid var(--filet);border-radius:3px;color:var(--encre);
  text-transform:none;letter-spacing:0;font-weight:400;transition:border-color .25s,box-shadow .25s}
.form-contact input:focus,.form-contact textarea:focus{outline:none;border-color:var(--vermillon);
  box-shadow:0 0 0 3px rgba(200,71,46,.12)}
.form-contact .bouton{align-self:flex-start;margin-top:.3rem}
.sb-pot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-merci{background:rgba(176,131,38,.13);border-left:3px solid var(--ocre);padding:1rem 1.2rem;
  border-radius:3px;font-family:var(--titre);font-style:italic;font-size:1.15rem;margin:0 0 1.8rem;color:var(--encre)}

/* ---- Pages (mentions, contact) ---- */
.page .entry-content,.page .ast-container .entry-content{max-width:var(--mesure);margin-inline:auto;font-size:1.12rem;line-height:1.8}
.page .entry-content h2{font-size:1.6rem;margin-top:2.2rem;padding-top:1.1rem;position:relative}
.page .entry-content h2::before{content:"";position:absolute;top:0;left:0;width:2.2rem;height:3px;background:var(--vermillon);border-radius:2px}
.page .entry-title{font-size:clamp(2rem,4.4vw,3rem);max-width:22ch;margin:0 0 1.4rem}
.bloc-coord{display:flex;flex-wrap:wrap;gap:1.6rem;margin:1.8rem 0;padding:1.4rem 1.6rem;background:var(--papier-clair);
  border:1px solid var(--filet);border-radius:4px}
.bloc-coord div{min-width:180px}
.bloc-coord .et{font-family:var(--texte);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:600;color:var(--vermillon-sombre);display:block;margin-bottom:.2rem}