/* ==========================================================================
   Le jardin des oiseaux — reproduction fidèle de la mise en page Betheme
   Tokens relevés sur le site live : voir docs/superpowers/plans/design-tokens.md
   ========================================================================== */

/* --- Polices (Lora self-hostée, latin + latin-ext) --- */
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/lora-400i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lora';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/lora-400i-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/lora-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lora';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/lora-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/lora-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lora';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/lora-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* --- Base --- */
:root{
  --dore:#db9d3a;        /* liens, bande highlight */
  --orange:#ff8400;      /* boutons, icône recherche */
  --marine:#08345d;      /* pied de page, entête mobile */
  --fond:#f0f1f2;        /* fond de contenu */
  --texte:#9d9fa0;       /* texte courant */
  --titre:#181e22;       /* titres */
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{
  margin:0;
  font:400 14px/21px Lora,Georgia,serif;
  color:var(--texte);
  background:var(--fond);
}
img{max-width:100%;height:auto;border:0}
a{color:var(--dore);text-decoration:none}
a:hover{text-decoration:underline}

/* ==========================================================================
   Entête
   ========================================================================== */
.entete{
  position:absolute;top:0;left:0;right:0;z-index:20;
  height:90px;
  background:url(/images/theme-bgmenu.png) repeat-x 50% 0;
}
.entete-contenu{
  max-width:1240px;margin:0 auto;height:90px;
  display:flex;align-items:center;padding:0 20px;
}
.logo{flex:0 0 auto;line-height:0}
.logo img{width:202px;height:60px}
.menu-mobile-case{position:absolute;opacity:0;pointer-events:none}
.burger,.fermer-menu{display:none;cursor:pointer;line-height:0}
.nav-principal{margin-left:auto;display:flex;align-items:center}
.nav-principal a{
  color:#fff;
  font:600 21px/90px Arial,Helvetica,sans-serif;
  text-decoration:none;
}
.nav-principal a:hover{text-decoration:none;opacity:.85}
.nav-principal a span{padding:0 20px}

/* recherche (crochet pour la recherche JS — tâche 7) */
#recherche{position:relative;margin-left:8px}
.loupe{display:block;color:var(--orange);cursor:pointer;line-height:0;padding:6px 0 6px 6px}
.panneau-recherche{
  display:none;position:absolute;right:0;top:56px;width:320px;
  background:#fff;box-shadow:0 4px 18px rgba(0,0,0,.18);padding:12px;
}
#recherche:focus-within .panneau-recherche,#recherche.actif .panneau-recherche{display:block}
#champ-recherche{
  width:100%;padding:9px 12px;border:1px solid #d5d6d8;
  font:400 15px/1.4 Lora,Georgia,serif;color:#444;background:#fff;
}
#champ-recherche:focus{outline:2px solid var(--orange);outline-offset:-1px}
.resultats{max-height:320px;overflow:auto}
.resultats a{display:block;padding:8px 4px;border-top:1px solid #ececec;color:#444;font-size:14px}

/* main sous entête translucide quand il n'y a pas de bannière */
.sous-entete{padding-top:90px}

/* ==========================================================================
   Bannières
   ========================================================================== */
.banniere{
  background-size:cover;background-position:center top;
  text-align:center;color:#fff;
}
.banniere h1{margin:0;font-weight:400;color:#fff}
.banniere-article{
  height:690px;
  display:flex;align-items:center;justify-content:center;
  padding:90px 40px 0;
}
.banniere-article h1{font-size:70px;line-height:70px}
.banniere-courte{padding:180px 30px 100px;background-size:auto;background-position:50% 0}
.banniere-courte h1{font-size:42px;line-height:42px;font-weight:500}

/* ==========================================================================
   Corps d'article
   ========================================================================== */
.article{padding-bottom:70px}
.article-corps{
  max-width:748px;margin:0 auto;padding:50px 20px 0;
  font-size:17px;line-height:30px;color:var(--texte);
}
.article-corps p{margin:0 0 15px}
.article-corps h2,
.article-corps h4{
  font-size:30px;line-height:34px;font-weight:400;color:var(--titre);
  margin:50px 0 15px;
}
.article-corps h5{font-size:20px;line-height:25px;font-weight:400;color:var(--titre);margin:30px 0 5px}
.article-corps > h2:first-child,
.article-corps > h4:first-child{margin-top:0}
.article-corps blockquote{
  font-style:italic;color:#444;line-height:25px;
  margin:0 0 25px 25px;padding:0;
}
.article-corps blockquote p{margin:0 0 10px}
.article-corps ul,.article-corps ol{margin:0 0 15px;padding-left:28px}
.article-corps li{margin-bottom:6px}
.article-corps img{display:block;margin:20px auto}

/* bande citation : ### „…" → h3 pleine largeur sur photo (FondCitations, identique sur tout le site) */
.article-corps h3,
.article-corps h4.bande-question{
  margin:50px calc(50% - 50vw) 0;
  padding:120px 10vw 70px;
  background:url(/images/theme-fond-citations.webp) center/cover no-repeat;
  color:#fff;text-align:center;
  font-size:42px;line-height:44px;font-weight:400;
}
.article-corps h4.bande-question{font-size:30px;line-height:38px}
.article-corps h3 + p,.article-corps h3 + h4,
.article-corps .bande-question + p,.article-corps .bande-question + h4{margin-top:50px}

/* bande « highlight-right » : * * * suivi d'un #### court → photo à gauche, aplat doré à droite */
.article-corps hr{display:none;border:0;margin:0}
.article-corps hr + h4{
  margin:50px calc(50% - 50vw) 0;
  padding:145px 8vw 75px 54vw;
  background-image:linear-gradient(90deg,rgba(219,157,58,0) 50%,var(--dore) 50%),url(/images/theme-fond-section.webp);
  background-size:cover;background-position:center top;background-repeat:no-repeat;
  color:#fff;
}
.article-corps hr + h4 + p,.article-corps hr + h4 + h4{margin-top:50px}

/* pagination précédent / suivant */
.article-pagination{
  max-width:1220px;margin:70px auto 0;padding:0 30px;
  display:flex;gap:24px;
}
.pagination-case{flex:1 1 0}
.bouton-page{
  display:block;background:#fff;color:var(--orange);
  text-align:center;font-size:14px;line-height:21px;padding:10px 20px;
}
.bouton-page:hover{text-decoration:none;background:var(--orange);color:#fff}

/* partage */
.partage{
  max-width:1220px;margin:60px auto 0;padding:14px 30px;
  display:flex;align-items:center;gap:16px;
  color:#a8a8a8;font-size:13px;
}
.partage a{color:#a8a8a8;line-height:0}
.partage a:hover{color:var(--dore)}

/* boîte auteur */
.boite-auteur{
  max-width:1220px;margin:10px auto 0;padding:25px 30px;
  display:flex;gap:20px;align-items:flex-start;
}
.boite-auteur-avatar{flex:0 0 64px;line-height:0}
.boite-auteur h5{margin:0 0 5px;font-size:20px;line-height:25px;font-weight:400}
.boite-auteur h5 a{color:var(--titre)}
.boite-auteur-desc{font-size:14px;line-height:21px;color:var(--texte)}

/* ==========================================================================
   Blog complet — grille de tuiles sans gouttière
   ========================================================================== */
.grille-articles{
  max-width:1197px;margin:0 auto;padding:80px 0 100px;
  display:grid;grid-template-columns:repeat(3,1fr);
}
.carte{position:relative;display:block;overflow:hidden}
.carte img{display:block;width:100%;height:auto}
.carte h5{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:60px 30px 22px;
  color:#fff;font-size:20px;line-height:25px;font-weight:400;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 100%);
}
.carte:hover h5{text-decoration:underline}

/* ==========================================================================
   Accueil
   ========================================================================== */
.hero{
  position:relative;
  height:958px;
  padding:270px 20px 20px;
  background:#b0b3b5 url(/images/theme-hero-accueil.webp) no-repeat top center;
  text-align:center;
}
.hero-contenu{max-width:1220px;margin:0 auto;padding-top:45px}
.hero-titre{width:580px}
.hero h4{
  color:#fff;font-size:30px;line-height:34px;font-weight:700;margin:15px 0;
}
.hero-pictos{width:485px;margin-top:80px}
.hero-chevron{
  position:absolute;left:50%;bottom:75px;transform:translateX(-50%);
  color:#fff;line-height:0;
}

.accueil-bloc{
  display:block;text-align:center;padding:60px 20px 70px;
  text-decoration:none;
}
.accueil-bloc:hover{text-decoration:none}
.accueil-bloc h4{font-size:30px;line-height:34px;font-weight:400;color:var(--titre);margin:25px 0 10px}
.epingle{width:314px}
.sous-titre{font-size:17px;line-height:30px;color:var(--texte);max-width:1020px;margin:0 auto}
.sous-titre.petit{font-size:13px;line-height:21px}

.bande-bleue{
  display:flex;align-items:center;justify-content:center;
  background-size:auto;background-position:center top;
  text-decoration:none;
}
.bande-bleue:hover{text-decoration:none}
.bande-gite{background-image:url(/images/theme-bgpictos2.webp);height:190px;background-position:left top}
.bande-rencontre{background-image:url(/images/theme-bgpictos1.webp);height:160px;background-position:right top}
.bande-rencontre h4{color:#fff;font-size:30px;line-height:34px;font-weight:400;margin:0}

/* ==========================================================================
   Contact
   ========================================================================== */
.page-contact{
  max-width:1236px;margin:0 auto;padding:20px 20px 90px;text-align:center;
}
.page-contact h4{font-size:30px;line-height:34px;font-weight:400;color:var(--titre);margin:25px 0 10px}
.bouton-orange{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;background:var(--orange);color:#fff;
  font-size:14px;line-height:21px;padding:10px 20px;margin:35px 0 0;
}
.bouton-orange:hover{text-decoration:none;opacity:.92}
.galerie-gite{
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px 23px;
  margin-top:45px;
}
.galerie-gite a{line-height:0}
.galerie-gite img{width:100%}

/* ==========================================================================
   Page auteur (/auteurmax/)
   ========================================================================== */
.page-auteur{
  max-width:1220px;margin:0 auto;padding:140px 30px 110px;
  display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;
}
.page-auteur h4{font-size:30px;line-height:34px;font-weight:400;color:var(--titre);margin:0 0 15px}
.page-auteur p{font-size:17px;line-height:30px;margin:0 0 15px}
.page-auteur-photo{line-height:0}

/* ==========================================================================
   404 (page nue : ni entête ni pied, comme sur le live)
   ========================================================================== */
.page-404{padding:110px 30px 470px}
.panneau-404{
  max-width:1220px;margin:0 auto;background:#f7f8f8;
  padding:90px 85px 105px;text-align:center;
}
.panneau-404 h2{font-size:26px;line-height:32px;font-weight:400;color:var(--titre);margin:0 0 10px}
.panneau-404 p{font-size:20px;line-height:28px;color:#444;margin:0 0 40px}

/* ==========================================================================
   Pied de page
   ========================================================================== */
.pied{
  position:relative;
  background:var(--marine);color:#fff;text-align:center;
  padding:78px 20px 78px;
}
.pied-encoche{position:absolute;top:-1px;left:0;right:0;height:17px;line-height:0}
.pied-encoche svg{width:100%;height:17px;display:block}
.pied-contenu{font-size:17px;line-height:25px}

/* ==========================================================================
   Mobile (≤ 767px) — entête repliée, tiroir de menu, bandes simplifiées
   ========================================================================== */
@media (max-width:767px){
  .entete{position:static;height:91px;background-color:var(--marine)}
  .entete-contenu{justify-content:center;position:relative;height:91px}
  .logo{margin:0 auto}
  .logo img{width:176px;height:52px}
  .burger{display:block;position:absolute;right:16px;top:50%;transform:translateY(-50%);color:var(--orange)}
  .fermer-menu{display:block;position:absolute;top:16px;right:16px;color:#fff}
  #recherche{display:none}
  .sous-entete{padding-top:0}

  .nav-principal{
    position:fixed;top:0;right:0;bottom:0;width:250px;z-index:60;
    background:rgba(16,16,16,.97);
    display:block;margin:0;padding:64px 20px 20px;
    transform:translateX(100%);transition:transform .25s ease;
    overflow-y:auto;
  }
  .menu-mobile-case:checked ~ .entete-contenu .nav-principal{transform:none}
  .nav-principal a{
    display:block;font:600 18px/1.2 Arial,Helvetica,sans-serif;color:#a6a6a6;
    padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08);
  }
  .nav-principal a span{padding:0}

  .banniere-article{height:215px;padding:60px 20px 0}
  .banniere-article h1{font-size:30px;line-height:34px}
  .banniere-courte{padding:70px 15px 45px}
  .banniere-courte h1{font-size:28px;line-height:32px}

  .article-corps{padding:35px 20px 0}
  .article-corps h3,.article-corps h4.bande-question{font-size:24px;line-height:32px;padding:60px 8%}
  .article-corps hr + h4{
    background-image:none;background-color:var(--dore);
    padding:55px 8%;
  }
  .article-pagination{padding:0 20px;gap:12px;margin-top:50px}
  .partage{padding:14px 20px}
  .boite-auteur{padding:25px 20px}

  .grille-articles{grid-template-columns:1fr;padding:35px 0 60px}

  .hero{height:700px;padding:330px 15px 15px;background-size:cover}
  .hero-titre{width:250px}
  .hero h4{font-size:24px;line-height:30px}
  .hero-pictos{width:300px;margin-top:40px}
  .hero-chevron{bottom:12px}
  .accueil-bloc{padding:45px 15px 50px}
  .accueil-bloc h4,.bande-rencontre h4,.page-contact h4{font-size:24px;line-height:30px}

  .bande-gite{background-position:-80px 0}
  .bande-rencontre{background-position:-1545px 0}
  .galerie-gite{grid-template-columns:1fr;gap:20px}
  .page-auteur{grid-template-columns:1fr;gap:40px;padding:60px 20px 70px}
  .page-404{padding:60px 15px 220px}
  .panneau-404{padding:50px 25px 60px}
  .pied{padding:55px 15px 45px}
  .pied-contenu{font-size:15px;line-height:23px}
}

/* tablette : la grille du blog passe à 2 colonnes, galerie à 2 */
@media (min-width:768px) and (max-width:1023px){
  .grille-articles{grid-template-columns:repeat(2,1fr)}
  .galerie-gite{grid-template-columns:repeat(2,1fr)}
  .page-auteur{gap:40px}
  .nav-principal a{font:600 16px/90px Arial,Helvetica,sans-serif}
  .nav-principal a span{padding:0 10px}
  .banniere-article h1{font-size:48px;line-height:50px}
}