/*
Theme Name:storefront-otoptv
Description:SITE DE OTOP-TV
Author:Jean-Pierre OTOP
Template:storefront
*/
/*:root {
    --fond-contenu:#fafafa;
    --fond-sidebar:#f0f0f0;
    --texte-principal:#222222;
    --texte-secondaire:#555555;
    --bordure-legere:#d9d9d9;
    --couleur-accent: #1686b8;
} */
:root {
    --otop-couleur-site: #2fa9e8;
    --otop-couleur-foncee: #073b66;
    --otop-couleur-survol: yellow;
    --otop-couleur-survol-txt: yellow;
    --otop-fond-contenu: #dddddd;
    --otop-fond-secondaire: #eeeeee;
    --otop-fond-ariane: #f1f1f1;
    --otop-texte: #17202a;
    --otop-largeur-max: 1500px;
    --otop-texte-blanc: #ffffff;
}

h3.wp-block-heading{margin:0px;}
H4.wp-block-heading{background: var(--otop-couleur-site);color:var(--otop-texte-blanc);text-align:center;margin-top:5px;}
h2,h3,h4,h5,h6{text-transform: uppercase;font-weight:900;}
h1{text-transform: uppercase;font-weight:300;}
        /*.editor-styles-wrapper{background-color:white;}*/
        /* .sub-menu{background-color:#444444;}*/
/**.pageaccueil_listearticles{padding:0px;}
.wp-block-latest-posts__list{padding:20px;}
a.wp-block-latest-posts__post-title, time.wp-block-latest-posts__post-date{padding:0px 20px;}
/**/
.widget{margin:0 0 0 0.08em;}
/*
COULEUR DE FOND #12B9FC
*/
.otop-bouton a {display: block;width: 100%;box-sizing: border-box;text-align: center;}
/* à supprimer, tentative correction couleur page dans backoffice... mais c'est pas ça'
.wp-block-details{background-color:#91C3D9;open}
*/
#masthead {height: 100px;min-height: 0;overflow: visible;margin: 0;padding: 0;border: 0;}
.site-header {margin: 0;padding: 0;}
/*
.custom-logo{width:100px;height:100px;}*/
.site-header .custom-logo-link img {width:100px;height:100px;}


/* CARTE DE FRANCE *//* Carte France OTOP */
.otop-carte-france {position: relative;max-width: 1100px;margin: 30px auto;}
.otop-carte-france img {width: 100%;height: auto;display: block;}
.otop-carte-france .region {position: absolute;transform: translate(-50%, -50%);background: rgba(255,255,255,0.88);color: #003a60;border: 1px solid #76D7FE;border-radius: 8px;padding: 6px 10px;font-size: 14px;font-weight: 700;text-align: center;text-decoration: none;line-height: 1.15; box-shadow: 0 2px 5px rgba(0,0,0,.18);}
.otop-carte-france .region small {font-size: 10px;font-weight: 400;}
.otop-carte-france .region:hover {background: #76D7FE;color: #000;}
/* Positions approximatives sur la carte */
.region-bretagne { left: 24%; top: 36%; }
.region-normandie { left: 36%; top: 26%; }
.region-hauts { left: 52%; top: 15%; }
.region-grandest { left: 66%; top: 31%; }
.region-idf { left: 50%; top: 34%; }
.region-centre { left: 46%; top: 42%; }

.region-bourgogne { left: 59%; top: 37%; }
.region-franchecomte { left: 69%; top: 48%; }

.region-pdl { left: 35%; top: 45%; }
.region-na { left: 39%; top: 63%; }
.region-ara { left: 59%; top: 65%; }
.region-occitanie { left: 51%; top: 80%; }
.region-paca { left: 69%; top: 77%; }
.region-corse { left: 77%; top: 83%; }
/* Boutons texte sous la carte */
.otop-liste-regions {display: flex;flex-wrap: wrap;gap: 10px;justify-content: center;margin: 25px auto 40px;}
.otop-liste-regions a {background: #76D7FE;color: #000;border: 2px solid #4ABEEA;border-radius: 6px;padding: 10px 14px;text-decoration: none;font-weight: 600;box-shadow: 0 2px 4px rgba(0,0,0,.15);}
.otop-liste-regions a:hover {background: #4ABEEA;color: #fff;}
/* Mobile : on cache les noms sur la carte, on garde les boutons texte */
@media screen and (max-width: 700px) {.otop-carte-france .region {display: none;}}
:where(.wp-block-columns) {margin-bottom: 0em;}
/*
#primary {background-color:#ffffff;padding:2em;margin:0;}
#secondary {background-color:#f2f2f2;padding:2em;margin:0;}
*/
/* ==========================================================
 *  EN-TÊTE STANDARD OTOP — STOREFRONT
 *  ========================================================== */
/* ----------------------------------------------------------
 *  Largeur générale
 *  ---------------------------------------------------------- */
.col-full {width: auto;max-width: var(--otop-largeur-max);margin-right: auto;margin-left: auto;padding-right: 28px;padding-left: 28px;}
/* ----------------------------------------------------------
 *  En-tête général
 *  ---------------------------------------------------------- */
#masthead.site-header {position: relative;height: auto;min-height: 90px;margin: 0;padding: 0;border: 0;background: var(--otop-couleur-site);}
#masthead .col-full {position: relative;min-height: 50px;padding-top: 0px;padding-bottom: 0px;line-height:0.8em;}
/* ----------------------------------------------------------
 *  Logo / identité
 *  ---------------------------------------------------------- */
.site-branding {float: none;width: auto;max-width: 330px;margin: 0;padding: 0;}
.site-branding .custom-logo-link {display: inline-flex;align-items: center;min-height: 100px;}
.site-header .custom-logo-link img, .custom-logo {display: block;width: auto;max-width: 320px;height: auto;max-height: 105px;margin: 0;object-fit: contain;margin:0;}
/*
 * Le titre et la description restent disponibles lorsque
 * WordPress n'a pas de logo, mais ne gênent pas avec un logo.
 */
.site-branding .site-title,
.site-branding .site-description {margin: 0;}
/* ----------------------------------------------------------
 *  Menu secondaire : À propos, Contact, Mentions...
 *  ---------------------------------------------------------- */
.secondary-navigation {position: absolute;top: 12px;right: 28px;float: none;width: auto;margin: 0;font-size: 15px;}
.secondary-navigation ul.menu {display: flex;flex-wrap: wrap;justify-content: flex-end;gap: 4px;margin: 0;padding: 0;}
.secondary-navigation ul.menu > li {float: none;margin: 0;}
.secondary-navigation ul.menu > li > a {display: block;padding: 8px 11px;color: #ffffff;font-weight: 600;line-height: 1.2;text-decoration: none;background: rgb(0 0 0 / 18%);border-radius: 3px;}.secondary-navigation ul.menu > li > a:hover, .secondary-navigation ul.menu > li.current-menu-item > a {color: #ffffff;background: rgb(0 0 0 / 35%);}
/* ----------------------------------------------------------
 *  Menu principal
 *  ---------------------------------------------------------- */
.storefront-primary-navigation {clear: both;width: 100%;margin: 0;background: var(--otop-couleur-foncee);}
.main-navigation {width: 100%;padding: 10px;}
.main-navigation ul.menu, .main-navigation ul.nav-menu {display: flex;flex-wrap: wrap;align-items: stretch;margin: 0;padding: 0;}
.main-navigation ul.menu > li,.main-navigation ul.nav-menu > li {float: none;margin: 0;}
.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {display: flex;align-items: center;min-height: 8px;padding: 6px 5px;color: #ffffff;font-size: 16px;font-weight: 600;line-height: 0.8;text-decoration: none;}
.main-navigation ul.menu > li > a:hover,.main-navigation ul.nav-menu > li > a:hover,.main-navigation ul.menu > li.current-menu-item > a, .main-navigation ul.menu > li.current-menu-ancestor > a, .main-navigation ul.nav-menu > li.current-menu-item > a, .main-navigation ul.nav-menu > li.current-menu-ancestor > a {color: #ffffff;background: var(--otop-couleur-survol);}
/* Sous-menus */
.main-navigation ul ul {background: var(--otop-couleur-foncee);box-shadow: 0 5px 2px rgb(0 0 0 / 22%);padding:0;line-height: 0.8;}
.main-navigation ul ul li a {color: #ffffff;padding: 2px 2px;}
.main-navigation ul ul li a:hover {background: var(--otop-couleur-survol);color:var(--otop-couleur-survol-txt);padding:2;}
/* ----------------------------------------------------------
 *  Icône Accueil dans le menu principal
 *  La classe "otop-menu-accueil" doit être attribuée
 *  à l'élément Accueil dans Apparence > Menus.
 *  ---------------------------------------------------------- */
.main-navigation .otop-menu-accueil > a {width: 52px;min-width: 52px;padding-right: 0;padding-left: 0;justify-content: center;overflow: hidden;white-space: nowrap;font-size: 0;}
.main-navigation .otop-menu-accueil > a::before {content: "⌂";display: block;font-size: 30px;font-weight: 700;line-height: 0.5;}
/* ----------------------------------------------------------
 *  Fil d'Ariane
 *  ---------------------------------------------------------- */
.otop-fil-ariane {clear: both;margin: 0;padding: 0;color: #39444d;background: var(--otop-fond-ariane);border-bottom: 1px solid #d5d5d5;font-size: 15px;line-height: 1.45;}
.otop-fil-ariane .col-full {padding-top: 2px;padding-bottom: 2px;}
.otop-fil-ariane a {color: #075b96;font-weight: 600;text-decoration: none;}
.otop-fil-ariane a:hover {text-decoration: underline;}
.otop-fil-ariane .otop-separateur {display: inline-block;margin-right: 4px;margin-left: 4px;color: #777777;}
/* ----------------------------------------------------------
 *  Contenu
 *  ---------------------------------------------------------- */
.site-content {margin: 0;padding-top: 0;}
#primary {box-sizing: border-box;background-color: var(--otop-fond-contenu);padding: 2em;margin-top: 0;margin-bottom: 0;}
#secondary {box-sizing: border-box;background-color: var(--otop-fond-secondaire);padding: 2em;margin-top: 0;margin-bottom: 0;}
/* Suppression de marges superflues en pleine largeur */
.page-template-template-fullwidth-php .site-main,
.page-template-template-fullwidth .site-main {margin-right: 0;margin-left: 0;}
/* ==========================================================
 *  TABLETTES ET SMARTPHONES
 *  ========================================================== */
@media screen and (max-width: 768px) {
.col-full {padding-right: 16px;padding-left: 16px;}
#masthead.site-header, #masthead .col-full {min-height: 92px;}
.site-branding {max-width: calc(100% - 70px);}
.site-branding .custom-logo-link {min-height: 76px;}
.site-header .custom-logo-link img,.custom-logo {max-width: 250px;max-height: 80px;}
/*
 * Le menu secondaire disparaît de l'en-tête étroit.
 * Les liens importants devront aussi être présents
 * dans le menu mobile ou dans le pied de page.
 */
.secondary-navigation {display: none;}
.storefront-primary-navigation {padding: 0;background: var(--otop-couleur-foncee);}
.menu-toggle {margin: 7px 16px;color: #ffffff;border-color: rgb(255 255 255 / 45%);background: rgb(255 255 255 / 10%);}
.main-navigation ul.menu, .main-navigation ul.nav-menu {display: block;}
.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {min-height: 36px;padding: 8px 8px;border-top: 1px solid rgb(255 255 255 / 12%);}

.main-navigation .otop-menu-accueil > a {width: 100%;justify-content: flex-start;padding-left: 16px;font-size: 16px;}
.main-navigation .otop-menu-accueil > a::before {content: "⌂";margin-right: 9px;font-size: 24px;}

.otop-fil-ariane {font-size: 12px;}
.otop-fil-ariane .col-full {overflow-wrap: anywhere;}
#primary,#secondary {padding: 1em;}
}

@media screen and (max-width: 420px) {
.col-full {padding-right: 12px;padding-left: 12px;}
.site-header .custom-logo-link img,
.custom-logo {max-width: 210px;max-height: 72px;}
#primary,#secondary {padding: 1em;}}

/* ===== Menu pied de page ===== */
.footer-navigation{text-align:center;padding:20px 0;border-top:1px solid #ccc;margin-top:30px;}
.footer-menu{margin:0;padding:0;list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:20px;}
.footer-menu li{margin:0;}
.footer-menu a{text-decoration:none;color:#666;font-size:.95rem;}
.footer-menu a:hover{color:#000;text-decoration:underline;}

.main-navigation ul.menu ul.sub-menu{background-color:var(--otop-couleur-foncee);}