/* Bretagne-Corée — feuille de style unique (présentation magazine) */

@font-face{
  font-family:"Oswald";font-style:normal;font-weight:400;
  src:local("Oswald Regular"),local("Oswald-Regular"),url("fonts/Oswald-Regular-400.woff") format("woff");
}
:root{
  --orange:#ffa500;
  --orange-fonce:#e08f00;
  --gris:#798992;
  --ardoise:#434c51;
  --sombre:#383838;
  --fond:#f6f6f6;
  --ligne:#e5e5e5;
  --blanc:#fff;
  --largeur:1170px;
  --titre:"Oswald","Arial Narrow",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Open Sans","Helvetica Neue",Arial,sans-serif;font-size:15px;color:var(--ardoise);background:var(--blanc);line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--orange-fonce)}
h1,h2,h3,h4{font-family:var(--titre);font-weight:400;line-height:1.15;margin:0 0 .5em;color:#222}
p{margin:0 0 1em}
.conteneur{max-width:var(--largeur);margin:0 auto;padding:0 15px}

/* ---------- en-tête ---------- */
.entete{padding:18px 0 14px}
.entete .conteneur{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.logo{font-family:var(--titre);font-size:35px;line-height:32px;text-decoration:none;color:var(--ardoise);font-weight:700;display:block}
.logo strong{color:var(--orange);font-weight:700;display:block}
.logo span{display:block;font-size:14px;font-weight:400;color:var(--gris);margin-top:4px}
.bandeau-ko{display:block}
.bandeau-ko img{width:728px;max-width:100%}
@media (max-width:991px){.bandeau-ko{display:none}}

/* ---------- navigation ---------- */
.navarea{background:var(--orange)}
.navarea .conteneur{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.nav{display:flex;flex-wrap:wrap;border:1px solid rgba(255,255,255,.6);width:100%}
.nav a{
  font-family:var(--titre);text-transform:uppercase;font-size:15px;color:#fff;text-decoration:none;
  padding:14px 15px;border-bottom:3px solid transparent;transition:background .2s;
}
.nav a:hover{background:rgba(0,0,0,.08)}
.nav a.actif{border-bottom-color:#fff;background:rgba(0,0,0,.08)}
.nav .tel{margin-left:auto}
.nav-toggle{display:none}
.nav-bouton{display:none;cursor:pointer;color:#fff;font-family:var(--titre);text-transform:uppercase;padding:12px 15px;width:100%}
@media (max-width:767px){
  .nav-bouton{display:block}
  .nav{display:none;flex-direction:column;border:none;border-top:1px solid rgba(255,255,255,.5)}
  .nav a{padding:11px 15px;border-bottom:1px solid rgba(255,255,255,.3)}
  .nav .tel{margin-left:0}
  .nav-toggle:checked ~ .nav{display:flex}
}

/* ---------- zone de contenu ---------- */
.principal{background:var(--fond);padding:15px 0 40px}

/* titre de rubrique : texte entre deux filets orange doublés */
.rubrique{position:relative;text-align:center;text-transform:uppercase;font-size:20px;margin:30px 0 20px;font-family:var(--titre);color:#222}
.rubrique::before{content:"";position:absolute;left:0;right:0;top:50%;height:10px;margin-top:-5px;
  background:linear-gradient(var(--orange) 0 3px,transparent 3px 7px,var(--orange) 7px 10px)}
.rubrique span{position:relative;background:var(--fond);padding:0 12px;z-index:1}
.rubrique.premiere{margin-top:5px}
.blanc .rubrique span{background:var(--blanc)}

/* mosaïque à la une */
.une{display:grid;grid-template-columns:7fr 5fr;gap:15px}
.une .grand{grid-row:span 2}
.une .petits{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media (max-width:767px){.une{grid-template-columns:1fr}.une .petits{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.une .petits{grid-template-columns:1fr}}
.tuile{position:relative;display:block;overflow:hidden;background:#222;text-decoration:none;color:#fff}
.tuile img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tuile:hover img{transform:scale(1.06)}
.tuile .legende{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.72);padding:10px 12px;text-align:center;font-size:15px;line-height:1.35}
.tuile.grand{min-height:420px}
.tuile.grand img{position:absolute;inset:0}
.tuile.grand .legende{font-family:var(--titre);font-size:22px;padding:14px 16px;text-align:left}
.tuile.petit{height:200px}
.tuile.petit img{position:absolute;inset:0}
.tuile.contenir{background:#fff}
.tuile.contenir img{object-fit:contain;padding:10px 10px 50px}

/* colonnes de rubriques */
.trois{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;margin-top:10px}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:10px}
@media (max-width:860px){.trois{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.trois,.deux{grid-template-columns:1fr}}
.rubrique-col{min-width:0}

/* article vignette (image + titre Oswald + ligne de méta) */
.article{display:block;text-decoration:none;color:var(--ardoise);margin-bottom:26px}
.article .img{height:170px;overflow:hidden}
.article .img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.article:hover .img img{transform:scale(1.08)}
.article h3{font-size:19px;margin:10px 0 4px;color:var(--ardoise);transition:color .3s}
.article:hover h3{color:var(--orange)}
.article p{margin:0;font-size:14px;color:#5a646a}
.meta{font-size:12px;color:var(--gris);margin:4px 0 6px}
.meta span{margin-right:12px}

/* article compact : petite image à gauche */
.compact{display:flex;gap:12px;text-decoration:none;color:var(--ardoise);border-top:1px solid var(--ligne);padding:12px 0}
.compact:first-of-type{border-top:none;padding-top:0}
.compact img{width:112px;height:90px;object-fit:cover;flex:none}
.compact h3{font-size:17px;margin:0 0 3px;color:var(--ardoise)}
.compact:hover h3{color:var(--orange)}
.compact p{margin:0;font-size:13px;color:#5a646a}

/* encart dates */
.encart{background:var(--blanc);border:1px solid var(--ligne);border-top:3px solid var(--orange);padding:16px 18px;margin-bottom:26px}
.encart h3{font-size:18px;text-transform:uppercase;margin-bottom:10px}
.dates{list-style:none;padding:0;margin:0}
.dates li{padding:8px 0;border-top:1px solid var(--ligne);font-size:14px}
.dates li:first-child{border-top:none;padding-top:0}
.dates time{display:block;font-family:var(--titre);color:var(--orange-fonce);font-size:15px}
.note{font-size:13px;color:var(--gris)}

/* boutons */
.bouton{display:inline-block;background:var(--orange);color:#fff;text-decoration:none;font-family:var(--titre);text-transform:uppercase;font-size:14px;padding:9px 18px;letter-spacing:.03em}
.bouton:hover{background:var(--orange-fonce)}
.bouton.gris{background:var(--ardoise)}
.bouton.gris:hover{background:#2f363a}

/* bande partenaire + lettre */
.bande-double{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:20px}
@media (max-width:767px){.bande-double{grid-template-columns:1fr}}
.boite{background:var(--blanc);border:1px solid var(--ligne);padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.boite .etiquette{font-family:var(--titre);text-transform:uppercase;font-size:12px;color:var(--gris);letter-spacing:.08em}
.boite strong{font-family:var(--titre);font-size:20px;font-weight:400;color:#222;display:block}
.boite.orange{background:var(--orange);border-color:var(--orange);color:#fff}
.boite.orange strong,.boite.orange .etiquette{color:#fff}
.boite.orange .bouton{background:#fff;color:var(--orange-fonce)}

/* ---------- pages intérieures ---------- */
.page-titre{font-size:30px;text-transform:uppercase;margin:12px 0 4px;color:#222}
.page-sous{color:var(--gris);margin:0 0 18px;font-size:15px}
.page-bandeau{height:300px;overflow:hidden;margin-bottom:22px}
.page-bandeau img{width:100%;height:100%;object-fit:cover}
@media (max-width:600px){.page-bandeau{height:200px}}
.colonnes{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:30px;align-items:start}
@media (max-width:860px){.colonnes{grid-template-columns:1fr}}
.texte{background:var(--blanc);border:1px solid var(--ligne);padding:26px 30px;font-size:15.5px;line-height:1.7}
.texte h2{font-size:22px;text-transform:uppercase;margin:1.6em 0 .5em;padding-bottom:6px;border-bottom:2px solid var(--orange);display:inline-block}
.texte h2:first-child{margin-top:0}
.texte img{margin:0 0 1em}
.pratique{background:var(--blanc);border:1px solid var(--ligne);border-top:3px solid var(--orange);padding:18px 20px}
.pratique h3{font-size:18px;text-transform:uppercase;margin-bottom:8px}
.pratique dl{margin:0}
.pratique dt{font-family:var(--titre);text-transform:uppercase;font-size:13px;color:var(--gris);margin-top:12px;letter-spacing:.05em}
.pratique dd{margin:2px 0 0;font-size:14.5px}
.pratique .bouton{margin-top:16px}
.galerie{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
@media (max-width:700px){.galerie{grid-template-columns:repeat(2,1fr)}}
.galerie img{aspect-ratio:1;object-fit:cover;margin:0}
.galerie img.large{grid-column:span 2;aspect-ratio:2/1}

/* ---------- pied ---------- */
.pied{background:var(--sombre);color:#c9cfd3;padding:30px 0 16px;font-size:13.5px}
.pied .conteneur{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
@media (max-width:700px){.pied .conteneur{grid-template-columns:1fr}}
.pied h4{color:#fff;text-transform:uppercase;font-size:16px;margin-bottom:8px;padding-bottom:6px;border-bottom:2px solid var(--orange);display:inline-block}
.pied ul{list-style:none;padding:0;margin:0}
.pied li{margin:4px 0}
.pied a{color:#e9ecee;text-decoration:none}
.pied a:hover{color:var(--orange)}
.pied-bas{border-top:1px solid #4a4a4a;margin-top:22px;padding-top:12px;text-align:center;font-size:12.5px;color:#9aa3a9}

/* ---------- ajouts : portrait, épisodes ---------- */
.tuile.grand.portrait img{object-position:center 18%}
.tuile .legende strong{display:block;font-family:var(--titre);font-size:24px;line-height:1.1;margin-bottom:3px}
.tuile.petit .legende{font-size:14px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:6px 0 10px}
@media (max-width:700px){.trio{grid-template-columns:1fr}}
.trio .article .img{height:150px}
.trio .article h3{font-size:17px}
.episode{display:grid;grid-template-columns:160px 1fr;gap:20px;align-items:center;background:var(--fond);border:1px solid var(--ligne);padding:16px;margin-bottom:22px}
@media (max-width:560px){.episode{grid-template-columns:1fr}}
.episode img{width:160px;height:160px;object-fit:cover;margin:0}
.episode audio{width:100%;margin-top:8px}
.episode .meta{font-size:13px}
.talisman{float:right;width:150px;margin:0 0 12px 22px;box-shadow:0 4px 14px rgba(0,0,0,.15)}
@media (max-width:560px){.talisman{float:none;margin:0 auto 16px}}
.portrait-card img{width:120px;height:120px;object-fit:cover;object-position:center 15%;border-radius:50%;margin:0 0 12px;border:3px solid var(--orange)}
.pratique .compact{border-top:1px solid var(--ligne);padding:10px 0}
.pratique .compact img{width:80px;height:64px}
.pratique .compact h3{font-size:15px;text-transform:none}

.eric{display:grid;grid-template-columns:150px 1fr;gap:18px;text-decoration:none;color:var(--ardoise);background:var(--blanc);border:1px solid var(--ligne);padding:16px}
@media (max-width:560px){.eric{grid-template-columns:1fr}}
.eric img{width:150px;height:190px;object-fit:cover;object-position:center 15%;margin:0}
.eric h3{font-size:19px;margin:0 0 8px}
.eric p{font-size:14px;color:#5a646a;margin:0 0 12px}
.eric:hover h3{color:var(--orange)}
.plateformes,.ecouter{font-size:13px;color:var(--gris);margin:12px 0 0;line-height:1.7}
.ecouter{margin:6px 0 0}
.compact .meta{margin:0 0 3px}

.boite.partenaire{text-decoration:none;color:var(--ardoise);gap:18px;align-items:center}
.boite.partenaire .kit{width:200px;height:auto;margin:0;flex:none}
.boite.partenaire .logo-p{width:170px;height:auto;margin:4px 0 8px}
.boite.partenaire div{font-size:14px}
.logo-pied{display:block;margin:6px 0 10px}
.logo-pied img{height:52px;width:auto}
.logo-pied:first-of-type img{background:#fff;padding:8px 12px;border-radius:4px;height:46px}

.shorts{display:flex;flex-wrap:wrap;gap:14px}
.short{width:270px;max-width:calc(50% - 7px);aspect-ratio:9/16;background:#000;overflow:hidden}
.short iframe{width:100%;height:100%;border:0;display:block}
.tuile.taegeuk{display:block;aspect-ratio:555/480;max-height:480px}
@media (max-width:600px){.tuile.taegeuk{aspect-ratio:3/2}}
.tuile.taegeuk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.videos-row{align-items:stretch}

.h1-accueil{font-size:22px;text-transform:none;margin:0 0 10px;color:#222}